如何使用 JavaScript 的事件监听来暂停和播放循环

下面是一个关于 DOM 操作的 JavaScript 程序，主要介绍如何使用事件监听（不要与延迟混淆）来暂停和播放循环。在本文中，我们使用 JavaScript 和 HTML，因此需要一个 web 浏览器，比如 Chrome（建议）或 Electron 应用程序。在几乎所有编程语言中，暂停和播放循环都是一项困难的任务，并且没有简单的解决方案可以在循环执行过程中暂停循环，并在单击按钮时再次播放，就像我们在视频中所做的那样，但是 JavaScript 的 Promise 概念使得使用 DOM 元素的事件监听器来暂停和播放循环变得容易。这里的暂停和播放循环并不意味着延迟循环。

方法： 我们在这个程序中实现暂停和播放循环的方法与使用 Promise 延迟循环的方法相同，但是不同的是，我们不是在一定的时间后解决 Promise，而是使用事件监听器解决 Promise。在代码中，我们使用了一个名为 Pauser 的函数，它将暂停循环内的程序执行，并使用一个变量 stats 作为暂停的标志。如果 stats 为 0，则暂停标志为 false，如果 stats 为 1，则暂停标志为 true，并调用 Pauser() 并等待事件监听器被解决。

语法：

// Function Definition Syntax
document.getElementById("pa")
    .addEventListener("click", function () {
        stats = 1;
    })

function pauser() {
    return new Promise(resolve => {
        let playbuttonclick = function () {
            document.getElementById("playbuttonelement")
                .removeEventListener("click", playbuttonclick);
            stats = 0;
            resolve("resolved");
        }
        document.getElementById("playbuttonelement")
            .addEventListener("click", playbuttonclick)
    })
}

// Function Caller Syntax
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();
    }
}

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

示例： 在此示例中，我们将在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>