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.
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 until then it will be // remain stucked inside Promise document.getElementById("playbuttonelement") .addEventListener("click", playbuttonclick) })} |
Function Calling Syntax:
Javascript
async anyfunction() { 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.
Please Login to comment...