SetInterval работает даже после того, как я его очистил

Question

У меня есть небольшая проблема с исправлением проблемы, которую я имею с setInterval.

У меня есть функция, которая запускается, когда я нажимаю элемент на моем веб-сайте, который устанавливает var pass = 1;

если вы посмотрите в цвете1(); существует набор Interval, который очищается, когда pass> 0; так что если pass = 1; то он должен очиститься, но это происходит, но только после запуска интервала еще раз.

поэтому он - запускает setInterval, очищает setInterval, затем пробегает остальную часть кода в setInterval. Мне нужно, чтобы setInterval удалялся, не запуская код снова.

Заранее спасибо

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 > 0) { 
      clearInterval(colorInterval); 
     } 

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

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

     }, 3000); 
    } 

Answer 1

Это должно быть, как показано ниже, вы должны return функция. Здесь вы очистили интервал, но вы не остановили выполнение.

var colorInterval = setInterval(function() { 

    if (pass > 0) { 
     clearInterval(colorInterval); 
     return; //stop here so that it doesn't continue to execute below code 
    } 

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

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

    }, 3000);