title: How to stop a function that is set to an interval instantly
body: <p>I am currently working on a controller for an RGB LED strip and writing on the effects, but I have the problem where I cannot stop the effects instantly.</p>
  
  <p>I've already tried the following, but that doesn't stop the effect right where it is. It only stops the effect after it's completed.</p>
  
  <pre><code>function jump3() {
    rgb.red = 255
    rgb.green = 0
    rgb.blue = 0
  
    socket.emit("rgbLed", rgb)
  
    var step1 = setTimeout(() =&gt; {
      rgb.red = 0
      rgb.green = 255
      rgb.blue = 0
      socket.emit("rgbLed", rgb)
    }, 1000);
  
    var step2 = setTimeout(() =&gt; {
      rgb.red = 0
      rgb.green = 0
      rgb.blue = 255
      socket.emit("rgbLed", rgb)
    }, 2000);
  }
  </code></pre>
  
  <p>What I've tried:</p>
  
  <pre><code>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(() =&gt; {
      rgb.red = 0
      rgb.green = 255
      rgb.blue = 0
      socket.emit("rgbLed", rgb)
    }, 1000);
  
    var step2 = setTimeout(() =&gt; {
      rgb.red = 0
      rgb.green = 0
      rgb.blue = 255
      socket.emit("rgbLed", rgb)
    }, 2000);
  }
  </code></pre>