如何稍后在 javascript 条件语句中的代码中执行 setInterval？

Question

我正在尝试更改我的 HTML 页面的背景颜色，如果单击按钮 id = 'button4'，则每 200 毫秒使用 setInterval。当用户再次点击同一个按钮时，我希望背景颜色的改变停止。

setInterval 的代码在分配给 var x 时执行，而我想在调用“goCrazy”函数内部满足条件时执行它。那怎么办？

clearInterval 工作正常，颜色变化停止。

下面是我的代码。

var x = setInterval(() => {
    const rndInt1 = randomIntFromInterval(0, 255);
    const rndInt2 = randomIntFromInterval(0, 255);
    const rndInt3 = randomIntFromInterval(0, 255);
    document.body.style.backgroundColor = `rgb(${rndInt1}, ${rndInt2}, ${rndInt3})`;
    }, 200);

function goCrazy() {

    if (document.getElementById('button4').innerText == 'Go Crazy') {
        document.getElementById('button4').innerText = 'stop';
        x;
    }
    else {
        clearInterval(x);
        document.getElementById('button4').innerText = 'Go Crazy';
    }
}


function randomIntFromInterval(min, max) { // min and max included
    return Math.floor(Math.random() * (max - min + 1) + min)
  }

我正在尝试更改我的 HTML 页面的背景颜色，如果单击按钮 id = 'button4'，则每 200 毫秒使用 setInterval。当用户再次点击同一个按钮时，我希望背景颜色的改变停止。

setInterval 的代码在分配给 var x 时执行，而我想在调用“goCrazy”函数内部满足条件时执行它。那怎么办？

clearInterval 工作正常，颜色变化停止。

下面是我的代码。

var x = setInterval(() => {
    const rndInt1 = randomIntFromInterval(0, 255);
    const rndInt2 = randomIntFromInterval(0, 255);
    const rndInt3 = randomIntFromInterval(0, 255);
    document.body.style.backgroundColor = `rgb(${rndInt1}, ${rndInt2}, ${rndInt3})`;
    }, 200);

function goCrazy() {

    if (document.getElementById('button4').innerText == 'Go Crazy') {
        document.getElementById('button4').innerText = 'stop';
        x;
    }
    else {
        clearInterval(x);
        document.getElementById('button4').innerText = 'Go Crazy';
    }
}


function randomIntFromInterval(min, max) { // min and max included
    return Math.floor(Math.random() * (max - min + 1) + min)
}

Answer 1

你可以将setInterval里面的代码提取到一个命名函数中，然后在goCrazy里面调用setInterval或者clearInterval。

var x;

function goCrazy(){
    if (document.getElementById('button4').innerText == 'Go Crazy') {
        document.getElementById('button4').innerText = 'stop';
        x = setInterval(changeBackground, 200);
    }
    else {
        document.getElementById('button4').innerText = 'Go Crazy';
        if (x) clearInterval(x);
    } 
}

function changeBackground() {
    const rndInt1 = randomIntFromInterval(0, 255);
    const rndInt2 = randomIntFromInterval(0, 255);
    const rndInt3 = randomIntFromInterval(0, 255);
    document.body.style.backgroundColor = `rgb(${rndInt1}, ${rndInt2}, ${rndInt3})`;
}

function randomIntFromInterval(min, max) { // min and max included 
    return Math.floor(Math.random() * (max - min + 1) + min)
}

Answer 2

OP首先需要使应该在一定时间间隔内运行的背景更改功能成为可寻址功能，例如将其实现为function statement。

其次，OP 需要跟踪运行/暂停间隔。人们可以通过单个事件处理程序来实现这一点，该事件处理程序知道自己的 this 上下文，其中可以 bind 至少一个 timeId 到它，甚至可能是一些额外的与按钮相关的文本数据。

使用按钮的 'click' event-listener 注册的处理函数的实现非常简单。

根据 null 绑定 timerId 的值比较，可以检测到 'running' 或 'halted' 间隔，这使得继续清除运行间隔或开始新间隔（包括按钮的文本切换）变得容易).

function getRandomValue(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function setRandomBackgroundColor() {
  document.body.style.backgroundColor =
    `rgb(${getRandomValue(0, 255)},${getRandomValue(0, 255)},${getRandomValue(0, 255)})`;
}

function toggleBackgroundBehaviorFromBoundState({ currentTarget: elmBtn }) {
  let toggleState;

  if ((this.timerId ?? null) !== null) {

    clearInterval(this.timerId);

    // explicitly nullify value due to the above `null` comparison.
    this.timerId = null;

    toggleState = 'halted';
  } else {
    this.timerId = setInterval(setRandomBackgroundColor, 100);

    toggleState = 'running';
  }
  elmBtn.textContent = this?.buttonCopy?.[toggleState];
}

function main() {
  document
    .querySelector('#button4')
    .addEventListener(
      'click',
      toggleBackgroundBehaviorFromBoundState.bind({
        buttonCopy: {
          running: 'Stop',
          halted: 'Go Crazy',
        },
        timerId: null,
      })
    );
}
main();

<button id="button4">Go Crazy</button>

编辑

由于上述解决方案被称为“令人困惑和非惯用的 JavaScript”, 非常适合看起来受欢迎的 this-context-free closure-风格。

function getRandomValue(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function setRandomBackgroundColor() {
  document.body.style.backgroundColor =
    `rgb(${getRandomValue(0, 255)},${getRandomValue(0, 255)},${getRandomValue(0, 255)})`;
}

function enableBackgroundToggleForButton(elmBtn, btnCopy = {}) {
  function toggleBackgroundBehavior() {
    let toggleCopy;

    if (timerId !== null) {

      clearInterval(timerId);

      timerId = null;
      toggleCopy = copyHalted;
    } else {
      timerId = setInterval(setRandomBackgroundColor, 100);
      toggleCopy = copyRunning;
    }
    elmBtn.textContent = toggleCopy;
  }
  // explicitly nullify value due to the above `null` comparison.
  let timerId = null;
  const {
    halted: copyHalted,
    running: copyRunning,
  } = btnCopy;

  elmBtn.addEventListener('click', toggleBackgroundBehavior);
}

enableBackgroundToggleForButton(
  document.querySelector('#button4'),
  { halted: 'Go Crazy', running: 'Stop'},
);

<button id="button4">Go Crazy</button>