单击按钮时开始和停止间隔

Question

我在这里有这个代码，我希望当我点击同一个按钮（停止的间隔）时背景停止改变。 但我无法解决它。（其他部分有效，因为在控制台中 isCicked 更改了它的值）。

 let btn = document.querySelector('#btn'); let body = document.querySelector('body'); let isClicked = false; btn.addEventListener('click', function(){ let x; let y; if(isClicked == false){ isClicked = true; x= setInterval(function(){ let r,g,b; r = Math.round(Math.random() * 255); g = Math.round(Math.random() * 255); b = Math.round(Math.random() * 255); body.style.backgroundColor = `rgb(${r},${g},${b})`; btn.classList.toggle('button-style') },1000) }else{ isClicked = false; clearInterval(x); } console.log(isClicked); })

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

Answer 1

要修复您当前的代码，您需要在事件侦听器之外声明x ，因为在每次单击时您都会重新声明它并覆盖您存储的间隔 ID。

let isClicked = false;
let x;

btn.addEventListener('click', function(){
    if(isClicked == false){
        isClicked = true;
        x = setInterval(function(){
    
    ...
}

但是您实际上可以通过组合isClicked和x并检查是否存储了一个间隔来简化一些。

 let btn = document.getElementById('btn'); let body = document.querySelector('body'); let interval = null; btn.addEventListener('click', function () { if (interval === null) { interval = setInterval(function () { let r, g, b; r = Math.round(Math.random() * 255); g = Math.round(Math.random() * 255); b = Math.round(Math.random() * 255); body.style.backgroundColor = `rgb(${r},${g},${b})`; btn.classList.toggle('button-style'); }, 1000); } else { clearInterval(interval); interval = null; } console.log(interval); });

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

Answer 2

与其尝试管理setInterval的状态， setInterval使用setTimeout和递归（一个调用自身的函数）来创建一个间隔。 同样，由于您在按钮上切换类，而不是使用变量突变，您可以只使用按钮本身作为递归的退出条件。

 let btn = document.querySelector('#btn'), body = document.querySelector('body'); function ChangeBackground() { if (btn.classList.contains('button-style')) { //check exit condition body.style.backgroundColor = '#' + Math.random().toString(16).slice(-6); setTimeout(ChangeBackground, 1000); //recursion } } btn.addEventListener('click', function(){ this.classList.toggle('button-style'); //toggle exit condition ChangeBackground(); //start recursion });

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