SetInterval running even after i clear it
<p>Im having a little trouble fixing a problem i have with setInterval.</p>

<p>I have a function that runs when i click an element on my website that sets var pass = 1;</p>

<p>if you look in color1(); there is a set Interval that clears itself when pass > 0; so if pass = 1; then it should clear itself, it does, but only after running the interval one more time.</p>

<p>so it - runs setInterval, clears setInterval, then runs the rest of the code in setInterval. What i need, is for setInterval to clear without running the code again. </p>

<p>Thanks in advance</p>

<pre><code>function color1() {
      var pass = 1;
      var counter = 2;
      var animationSpeed = 800;

      var $colorContent = '.color-container-1 .color-content-container'

      var colorInterval = setInterval(function() {

        if (pass &gt; 0) {
          clearInterval(colorInterval);
        }

        $($colorContent).fadeOut(0);
        $(($colorContent + '-' + counter)).fadeIn(animationSpeed);
        ++counter

        if (counter === $($colorContent).length + 1) {
          counter = 1;
        }

      }, 3000);
    }
</code></pre>