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

【问题标题】：How to stop a function that is set to an interval instantly如何立即停止设置为间隔的功能
【发布时间】：2019-05-29 16:41:30
【问题描述】：

我目前正在开发用于 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);
}

【问题讨论】：

clearTimeout 采用一个表示计时器 ID 的 int。不确定在那里传递一个函数会做任何有用的事情。
@rlemon 你觉得我应该怎么做？
如果你想停止一个定时器，你需要 timerID，这样你就可以将它从池中移除。 @Jan 已经提出了一种方法，就是将变量向上移动一个范围。那么每次调用函数时它们都不会被覆盖。

标签： javascript function exit

【解决方案1】：

尝试将计时器变量的声明放在函数之外。

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 + 'StackOverflow! ';
  }, 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>

【讨论】：

同样的问题
我更新了答案中的代码。它现在是一个可执行的示例。 @MavRick