資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告