如何防止 setInterval 同时被多次调用？
[英]How to prevent setInterval from being called multiple times simultaneously?
问题描述
Is there a way to make the setInterval work only once at a time?
有没有办法让 setInterval 一次只工作一次？ My code should work this way:我的代码应该这样工作：
- You manually input the number of the seconds;您手动输入秒数；
- The "div" works as a timer and runs till reaching 0. “div”用作计时器并运行直到达到 0。
If you click "Click me" once, it will work as expected.如果您单击“单击我”一次，它将按预期工作。 However, if you click the button multiple times fast enough, the even listener will be working simultaneously as many times as you clicked.但是，如果您以足够快的速度多次单击按钮，则偶数侦听器将与您单击的次数一样同时工作。
let button = document.getElementById('button'); let input = document.getElementById('input'); let timer = document.getElementById('timer'); function timerRunner () { let startTime = input.value; if (startTime <= 0) { console.log('The number is <=0') } else { do { timer.textContent = startTime; let counter = startTime; let interval = setInterval(()=> { console.log(counter); counter--; timer.textContent = counter; if (counter === 0) { clearInterval(interval); } }, 1000); } while (typeof (timer.textContent) == "number"); } } button.addEventListener('click', timerRunner)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .centeralizer { display: block; width: 200px; margin: 20vh auto; } #input { display: block; margin-bottom: 35px; width: 150px; } #button { display: inline-block; margin-right: 35%; } #timer { display: inline-block; } </style> <script src="index.js" defer></script> </head> <body> <div class="centeralizer"> <input id="input" placeholder="Input the number" type="number"> <button id="button">Click me</button> <div id="timer">0</div> </div> </body> </html>
2 个解决方案
解决方案1
0 2021-11-16 19:30:00
You can add a boolean variable isRunning that tracks whether the timer is running.您可以添加一个布尔变量isRunning来跟踪计时器是否正在运行。 You set it on when the timer is running and set it off when the timer is done.您可以在计时器运行时将其设置为开启，并在计时器完成时将其关闭。 Check if it's on when the button is clicked, and return if it is.单击按钮时检查它是否打开，如果是则返回。 You can prevent multiple instances of the timer being triggered.您可以防止触发计时器的多个实例。
let button = document.getElementById('button');
let input = document.getElementById('input');
let timer = document.getElementById('timer');
var isRunning = false;
function timerRunner () {
if(isRunning) {
return; //return if timer is already running
}
isRunning = true; //specify that the timer is running
let startTime = input.value;
if (startTime <= 0) {
console.log('The number is <=0')
} else {
do {
timer.textContent = startTime;
let counter = startTime;
let interval = setInterval(()=> {
console.log(counter);
counter--;
timer.textContent = counter;
if (counter === 0) {
isRunning = false; //specify that the timer is not running and can be run again
clearInterval(interval);
}
}, 1000);
} while (typeof (timer.textContent) == "number");
}
}
button.addEventListener('click', timerRunner)
解决方案2
0 2021-11-16 19:38:00
You should store the running interval in the upper scope and clear it if the button is pressed again.您应该将运行间隔存储在上部范围内，如果再次按下按钮，则清除它。
const button = document.getElementById('button');
const input = document.getElementById('input');
const timer = document.getElementById('timer');
let interval = null;
function startTimer() {
const startTime = +input.value;
if (startTime <= 0) {
console.log('The number is <= 0');
return;
}
let counter = startTime;
timer.textContent = startTime;
if (interval) clearInterval(interval);
interval = setInterval(() => {
timer.textContent = --counter;
console.log(counter);
if (counter === 0) clearInterval(interval);
}, 1000);
}
button.addEventListener('click', startTimer)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.