如何防止 setInterval 同时被多次调用？

Question

有没有办法让 setInterval 一次只工作一次？ 我的代码应该这样工作：

您手动输入秒数；
“div”用作计时器并运行直到达到 0。

如果您单击“单击我”一次，它将按预期工作。 但是，如果您以足够快的速度多次单击按钮，则偶数侦听器将与您单击的次数一样同时工作。

 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>

Answer 1

您可以添加一个布尔变量isRunning来跟踪计时器是否正在运行。 您可以在计时器运行时将其设置为开启，并在计时器完成时将其关闭。 单击按钮时检查它是否打开，如果是则返回。 您可以防止触发计时器的多个实例。

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)

Answer 2

您应该将运行间隔存储在上部范围内，如果再次按下按钮，则清除它。

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)

如何防止 setInterval 同时被多次调用？

问题描述

2 个解决方案

解决方案1
0 2021-11-16 19:30:00

解决方案2
0 2021-11-16 19:38:00

如何防止 setInterval 同时被多次调用？

问题描述

2 个解决方案

解决方案1 0 2021-11-16 19:30:00

解决方案2 0 2021-11-16 19:38:00

解决方案1
0 2021-11-16 19:30:00

解决方案2
0 2021-11-16 19:38:00