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

【问题标题】：How to prevent setInterval from being called multiple times simultaneously?如何防止 setInterval 同时被多次调用？
【发布时间】：2021-12-27 21:01:07
【问题描述】：

有没有办法让 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>

【问题讨论】：

JavaScript 是单线程且非抢占式的，因此不会同时运行。

标签： javascript setinterval clearinterval

【解决方案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)

【讨论】：

终于成功了！你拯救了我的一天，因为我已经尝试解决了好几个小时！
您也可以将interval 设为全局变量并将其用于计时器和标志。

【解决方案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)

【讨论】：

是的，这比使用两个不同的变量进行跟踪更简单 - 而且您还取消了 do/while，恕我直言，如果有任何替代方案（至少在 javascript 中），则永远不应该使用它，因为它超出了 self-迭代函数它确实是挂起你的脚本的唯一方法。