SetInterval läuft auch nachdem ich es gelöscht habe

Question

Ich habe ein kleines Problem, ein Problem zu beheben, das ich mit SetInterval habe.

Ich habe eine Funktion, die ausgeführt wird, wenn ich auf ein Element auf meiner Website klicke, das var pass = 1 setzt;

wenn Sie in color1() schauen; Es gibt ein gesetztes Intervall, das sich selbst löscht, wenn pass> 0; also wenn pass = 1; dann sollte es sich selbst klären, aber erst nach dem Intervall noch einmal.

so es - führt setInterval, löscht setInterval, dann führt den Rest des Codes in setInterval. Was ich brauche, ist, dass setInterval gelöscht wird, ohne den Code erneut auszuführen.

Vielen Dank im Voraus

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

Es sollte wie unten sein, sollten Sie return die Funktion. Hier haben Sie das Intervall gelöscht, aber Sie haben die Ausführung nicht gestoppt.

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);