点击按钮两次触发多个interval，调用clearInterval后计时器停止计数求助

你的核心问题是每次点击按钮都会创建新的定时器实例，旧的定时器没有被清除，导致多个计数器同时运行。而你之前尝试的clearInterval(interval)无效，是因为interval是函数内部的局部变量，每次调用times都会重新声明，旧的定时器引用直接丢失了，根本清不掉。

修复方案1：使用全局变量保存定时器引用 #

把定时器和计数器变量移到函数外部，这样每次点击都能访问到同一个引用：

// 外部保存定时器和计数器，避免每次调用丢失引用
let interval;
let counter = 0;

function times(){
    const element = document.getElementById("sec");
    // 先清除之前的定时器
    clearInterval(interval);
    // 重置计数器并更新显示
    counter = 0;
    element.innerHTML = counter;
    // 启动新的定时器
    interval = setInterval(() => {
        counter++;
        element.innerHTML = counter;
    }, 1000);
}

修复方案2：用闭包避免全局变量污染 #

如果不想用全局变量，可以用IIFE创建闭包，把变量封装起来：

const times = (() => {
    let interval;
    let counter = 0;
    
    return function(){
        const element = document.getElementById("sec");
        clearInterval(interval);
        counter = 0;
        element.innerHTML = counter;
        interval = setInterval(() => {
            counter++;
            element.innerHTML = counter;
        }, 1000);
    }
})();

为什么之前的方法没用？ #

你之前在let interval = setInterval(...)前调用clearInterval(interval)，但此时interval还没被赋值，值是undefined，clearInterval对undefined不会有任何操作。而且就算之后赋值，这个interval也只是当前函数调用的局部变量，之前点击创建的定时器已经找不到引用了，自然清不掉。

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