How to Pause and Play a Loop in JavaScript using Event Listeners ?
Given below is a JavaScript program for DOM manipulation which is basically about How to Pause and Play a loop in JavaScript using event listeners (not to be confused with delay). In this article, we are using JavaScript with HTML so we need a web browser i.e., Chrome (recommended) or Electron Application. Pausing and playing a loop is such a difficult task in almost every programming languages and there is no simple solution to pause a loop in between its execution and playing it again on click of a button just like we do in video clips, but JavaScript Promise concept makes it easy to pause and play loop with event listeners of DOM elements. Here pausing and playing a loop doesn’t mean delaying a loop.
If you are looking for delaying a loop in JavaScript then we have already created a separate article for it, Visit: https://www.geeksforgeeks.org/how-to-delay-a-loop-in-javascript-using-async-await-with-promise/
Approach: Our approach in this program for pausing and playing a loop is same as delaying a loop using Promise, but instead of resolving the Promise after some specific duration, we will resolve Promise by event listeners. Here in the code we used a function named as Pauser which will pause the program execution inside the loop, and we used a variable stats which acts like a flag for pause.
If the stats is 0 then pause flag is false and if stats is 1 then pause flag is true and then it will call the Pauser() and wait for event listener to get resolved.
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
Function Definition Syntax:
Javascript
// This event listener will listen for // pause button click which will assign// stats = 1 (means pause flag true)document.getElementById("pa") .addEventListener("click", function () { stats = 1; }) function pauser() { return new Promise(resolve => { let playbuttonclick = function () { // Remove the event from play button // after clicking play button document.getElementById("playbuttonelement") .removeEventListener("click", playbuttonclick); stats = 0; resolve("resolved"); } // Here is the event listener for play // button (instead of setTimeout) which // will wait for the element to get click // to get resolved untill then it will be // remain stucked inside Promise document.getElementById("playbuttonelement") .addEventListener("click", playbuttonclick) })} |
Function Calling Syntax:
Javascript
async anyfucntion() { for (let i = 0; i < 10000; i++) { // This statement will check for // the stats value and if it is // equal to 1 then it will call // pauser() and the loop will // get paused! if (stats == 1) await pauser(); }} |
We have discussed the whole working of the code above, now here is the Complete Code, just copy and create a separate html file and run it!
Complete Code
HTML
<!DOCTYPE html><html> <body> <button id="pl">Play</button> <button id="pa">Pause</button> <div style="display:flex;"> <p id="min">0</p> <p id="sec">0</p> <p id="milisec">0</p> </div> <script> document.getElementById("pl") .setAttribute("disabled", "true") var stats = 0; function waitforme(ms) { return new Promise(resolve => { setTimeout(() => { resolve('') }, ms); }) } function pauser() { return new Promise(resolve => { let playbuttonclick = function () { document.getElementById("pa") .removeAttribute("disabled") document.getElementById("pl") .setAttribute("disabled", "true") document.getElementById("pl") .removeEventListener("click", playbuttonclick); stats = 0; resolve("resolved"); } document.getElementById("pl") .addEventListener("click", playbuttonclick) }) } document.getElementById("pa") .addEventListener("click", function () { stats = 1; document.getElementById("pa") .setAttribute("disabled", "true") document.getElementById("pl") .removeAttribute("disabled") }) let second; async function go() { second = document.getElementById("sec"); for (let a = 0; ; a = a + 100) { if (a == 1000) { a = 0; second.innerHTML = Number(second.innerHTML) + 1; } if (second.innerHTML == 60) { second.innerHTML = 0; let minute = document .getElementById("min"); minute.innerHTML = Number(minute.innerHTML) + 1; } document.getElementById("milisec") .innerHTML = a / 100; await waitforme(100); if (stats == 1) await pauser(); } } go(); </script></body> </html> |
Output:
Application of the above implementation: Stopwatch, pausing/playing any custom animation made in javascript, Data Visualization, etc.
Note: We had used ‘click’ event in this code, other users can use any event handler such as click, mousenter, mouseover, mouseon, mousemove, keypress, etc of his/her choice.
