如何使用 JavaScript 中的事件侦听器暂停和播放循环?
front end technologyjavascriptweb development
在本文中,我们将了解如何使用 JavaScript 中的事件侦听器和承诺随时暂停和播放循环。暂停和播放循环是指 for 循环正在运行,我们想在循环中的任何位置之间暂停或再次播放。
可以将 事件侦听器 附加到任何元素,以控制事件对冒泡的反应。它将事件处理程序附加到元素。
语法
以下是事件侦听器的语法 −
element.addEventListener(event, function, useCapture);
参数
event − 它是事件的名称,即"click"。
function − 事件发生时返回的函数。
useCapture − 可选,默认值为 false。
方法
要暂停和播放循环,我们将使用具有承诺概念的事件监听器。
为了完成此任务,我们使用一个名为 eventt 的函数,此函数使用一个承诺,无论何时暂停或播放循环,该承诺都会解析。
它正在获取使用 removeAttribute 和 setAttribute 函数暂停,有一个名为 go 的变量用于表示我们何时播放或暂停循环,go=1 表示循环暂停,go=0 表示循环播放。
最后,我们使用 async-await 函数,用于启动 for 循环并显示循环暂停或播放的时间。
示例
我们使用以下代码在 JavaScript 中使用事件监听器播放和暂停循环。
<!DOCTYPE html> <html> <body> <h3>Pause and play a loop using event Listeners</h3> <p>Click on below buttons to pause and play the counter</p> <button id="start">Play</button> <button id="stop">Pause</button> <div> <p id="sec">0</p> </div> <script> document.getElementById("start") .setAttribute("disabled", "true") var go = 0; function waitforme(ms) { return new Promise(resolve => { setTimeout(() => { resolve('') }, ms); }) } function eventt() { return new Promise(resolve => { let playbuttonclick = function () { document.getElementById("stop") .removeAttribute("disabled") document.getElementById("start") .setAttribute("disabled", "true") document.getElementById("start") .removeEventListener("click", playbuttonclick); go = 0; resolve("resolved"); } document.getElementById("start") .addEventListener("click", playbuttonclick) }) } document.getElementById("stop") .addEventListener("click", function () { go = 1; document.getElementById("stop") .setAttribute("disabled", "true") document.getElementById("start") .removeAttribute("disabled") }) async function calculate() { for (let a = 0;a<10000;a++) { document.getElementById("sec").innerHTML = a ; await waitforme(1000); if (go == 1) await eventt(); } } calculate(); </script> </body> </html>
在这里,您可以看到输出,循环将从索引零开始,并在您按下暂停按钮时停止,并在您按下播放按钮时重新开始。在这里,数字以与秒数相同的速度运行,但我们也可以通过更改 await waitforme() 函数中的值来提高计数速度。我们还可以通过添加一些函数来显示分钟,从而在单个循环中显示多个计数。
注意 - await wait for me 函数中的值的单位为毫秒,即值 1000=1 秒。