如何避免setInterval被多次同时触发？解决按钮点击计时器重复执行问题

核心思路是通过全局变量存储当前运行的定时器ID，每次触发点击事件时先清除上一个定时器，确保同一时间仅存在一个运行的setInterval实例。另外你原有代码中的do...while逻辑是无效的，timer.textContent返回值始终是字符串类型，循环判断条件永远不成立，可直接删除。

修改后完整JS代码 #

let button = document.getElementById('button');
let input = document.getElementById('input');
let timer = document.getElementById('timer');
// 全局存储当前运行的定时器ID
let currentInterval = null;

function timerRunner () {
    let startTime = Number(input.value);
    if (startTime <= 0) {
        console.log('The number is <=0')
        return
    }
    // 每次运行前先清空上一个定时器，避免多实例冲突
    if (currentInterval) {
        clearInterval(currentInterval)
    }
    let counter = startTime
    timer.textContent = counter
    currentInterval = setInterval(()=> {
        console.log(counter);
        counter--;
        timer.textContent = counter;
        if (counter === 0) {
            clearInterval(currentInterval);
            // 计时结束重置定时器变量
            currentInterval = null
        }
    }, 1000);
}

button.addEventListener('click', timerRunner)

可选优化方案 #

如果想要彻底避免用户重复点击触发，可在计时过程中禁用按钮，修改逻辑如下：

function timerRunner () {
    let startTime = Number(input.value);
    if (startTime <= 0) {
        console.log('The number is <=0')
        return
    }
    if (currentInterval) {
        clearInterval(currentInterval)
    }
    // 计时开始禁用按钮
    button.disabled = true
    let counter = startTime
    timer.textContent = counter
    currentInterval = setInterval(()=> {
        console.log(counter);
        counter--;
        timer.textContent = counter;
        if (counter === 0) {
            clearInterval(currentInterval);
            currentInterval = null
            // 计时结束恢复按钮可点击
            button.disabled = false
        }
    }, 1000);
}

内容的提问来源于stack exchange，提问作者Paul