Как мгновенно остановить функцию, для которой установлен интервал

Question

В настоящее время я работаю над контроллером для светодиодной ленты RGB и пишу об эффектах, но у меня проблема в том, что я не могу немедленно остановить эффекты.

Я уже пробовал следующее, но это не останавливает эффект там, где он есть. Останавливает эффект только после его завершения.

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

Попробуйте разместить объявление переменных таймера вне функции.

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>