如何立即停止设置为间隔的功能

Question

我目前正在研究 RGB LED 灯条的控制器并编写效果，但我遇到无法立即停止效果的问题。

我已经尝试了以下方法，但这并没有阻止效果。只有完成后才会停止效果。

function jump3() {
  rgb.red = 255
  rgb.green = 0
  rgb.blue = 0

  socket.emit("rgbLed", rgb)

  var step1 = setTimeout(() => {
    rgb.red = 0
    rgb.green = 255
    rgb.blue = 0
    socket.emit("rgbLed", rgb)
  }, 1000);

  var step2 = setTimeout(() => {
    rgb.red = 0
    rgb.green = 0
    rgb.blue = 255
    socket.emit("rgbLed", rgb)
  }, 2000);
}

我尝试过的：

function jump3() {
  if (stopEffect == 1) {
    clearTimeout(step1)
    clearTimeout(step2)
    stopEffect = 0
    return
  }
  rgb.red = 255
  rgb.green = 0
  rgb.blue = 0

  socket.emit("rgbLed", rgb)

  var step1 = setTimeout(() => {
    rgb.red = 0
    rgb.green = 255
    rgb.blue = 0
    socket.emit("rgbLed", rgb)
  }, 1000);

  var step2 = setTimeout(() => {
    rgb.red = 0
    rgb.green = 0
    rgb.blue = 255
    socket.emit("rgbLed", rgb)
  }, 2000);
}

Answer 1

尝试将 timer-variables 的声明放在函数之外。

var stopAction = false;
var timer = false;

function action() {
  if (stopAction) {
    clearTimeout(timer);
    stopAction = false;
    return;
  }
  timer = setTimeout(function(){
    let output = document.getElementById('output');
    output.textContent = output.textContent + 'Whosebug! ';
  }, 1000);
}

document.getElementById('start').addEventListener('click', action);
document.getElementById('stop').addEventListener('click', function(){
  stopAction = true;
  action();
});

<div>
  <button id="start">Start</button> 
  <button id="stop">Stop</button>
</div>
<div id="output"></div>

如何立即停止设置为间隔的功能

How to stop a function that is set to an interval instantly

javascript

function

exit