点击同一按钮启停setInterval实现背景色切换的问题排查

你代码中用于存储定时器ID的变量x被声明在点击事件的回调函数内部，属于每次点击都会重新初始化的局部变量。当首次点击触发定时器时，ID仅存在于本次点击生成的函数作用域内；第二次点击进入else分支时，当前作用域下的x是未赋值的新变量，无法获取到之前生效的定时器ID，因此clearInterval执行后无法终止定时器。

JS代码 #

let btn = document.querySelector('#btn');
let body = document.querySelector('body');
let isClicked = false;
let timerId = null; // 将定时器ID变量提到全局作用域存储

btn.addEventListener('click', function(){
    if(isClicked == false){
        isClicked = true;
        timerId = setInterval(function(){
            let r = Math.round(Math.random() * 255);
            let g = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);
            body.style.backgroundColor = `rgb(${r},${g},${b})`;
            btn.classList.toggle('button-style')
        },1000)
    }else{
        isClicked = false;
        clearInterval(timerId); // 直接访问全局存储的定时器ID
    }
    console.log(isClicked);
})

HTML代码 #

<button type="button" id="btn">Click</button>

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