数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中使用事件监听器暂停和播放循环？
在本文中，我们将了解如何使用事件监听器和 Promise 在**JavaScript**中随时暂停和播放循环。暂停和播放循环指的是，当 for 循环正在运行时，我们希望在循环中的任何位置暂停，或者希望再次播放。
可以将**事件监听器**附加到任何元素，以控制事件如何对冒泡做出反应。它将事件处理程序附加到元素。
语法
以下是事件监听器的语法：
element.addEventListener(event, function, useCapture);
参数
**event** − 事件名称，例如“click”。
**function** − 事件发生时返回的函数。
**useCapture** − 可选，默认为false。
方法
为了暂停和播放循环，我们将结合 Promise 的概念使用事件监听器。
为了完成此任务，我们使用一个名为eventt的函数，该函数使用一个 Promise，该 Promise 在循环暂停或播放时解析。
它使用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 waitforme 函数中的值单位为毫秒，这意味着值 1000 = 1 秒。
更新于：2022年7月26日
1K+ 次浏览
广告