如何使用 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 秒。
