如何使用事件侦听器在 JavaScript 中暂停和播放循环？

下面给出了一个用于 DOM 操作的 JavaScript 程序，它基本上是关于如何使用事件侦听器在 JavaScript 中暂停和播放循环（不要与延迟混淆） 。在本文中，我们将 JavaScript 与 HTML 结合使用，因此我们需要一个网络浏览器，即 Chrome（推荐）或 Electron 应用程序。暂停和播放循环在几乎所有编程语言中都是一项艰巨的任务，并且没有简单的解决方案可以像我们在视频剪辑中所做的那样在循环执行和单击按钮再次播放之间暂停循环，但是 JavaScript Promise概念使用 DOM 元素的事件侦听器可以轻松暂停和播放循环。这里暂停和播放循环并不意味着延迟循环。
如果您正在寻找延迟 JavaScript 中的循环，那么我们已经为它创建了一篇单独的文章，请访问：https://www.geeksforgeeks.org/how-to-delay-a-loop-in-javascript-using-async -await-with-promise/

方法：我们在这个程序中暂停和播放循环的方法与使用Promise延迟循环相同，但是我们不是在特定的持续时间后解析Promise，而是通过事件侦听器来解析 Promise。在代码中，我们使用了一个名为Pauser的函数，它将暂停循环内的程序执行，我们使用了一个变量stats ，它的作用类似于暂停标志。
如果 stats 为 0，则暂停标志为假，如果 stats 为 1，则暂停标志为真，然后它将调用 Pauser() 并等待事件侦听器得到解决。

函数定义语法：

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)
    })
}

函数调用语法：

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();
    }
}

我们已经讨论了上面代码的整个工作，现在这里是完整的代码，只需复制并创建一个单独的 html 文件并运行它！

完整代码

HTML

  

    Play
    Pause
      
    
        0
            
        0
            
        0
    
  
    
        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();
    

  

输出：

上述实现的应用：秒表、暂停/播放任何用 javascript 制作的自定义动画、数据可视化等。

注意：我们在这段代码中使用了 ‘click’ 事件，其他用户可以使用他/她选择的任何事件处理程序，例如 click、mouseenter、mouseover、mouseon、mousemove、keypress 等。