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

Question

我在这里有这段代码，我希望当我单击同一个按钮时背景停止变化（停止的间隔）。但我无法解决它。（else 部分有效，因为在控制台中 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 的状态，您可以使用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>