How to Pause and Play a Loop in JavaScript using Event Listeners ?

Difficulty Level : Hard
Last Updated : 22 Feb, 2021

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 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.

My Personal Notes

Related Articles

Javascript

Javascript

Complete Code

HTML