Kann mir jemand sagen, warum das einmal funktioniert?

Question

Ich habe einen einfachen Regenbogen in SCSS & jQuery erstellt und es funktioniert gut, nur einmal. Kann mir jemand sagen, warum es nicht mehrmals ausgeführt wird?

JS

function Raibow() { 
    $('#rainbow').show(); 

    setTimeout(function() { 
    $('#rainbow .rainbow').addClass('rainbow-effect'); 
    }, 100); 

    $n = 5; $('#rainbow-timing').text($n); 
    setTimeout(function() { 
    $('#rainbow-message').show('fade', 400); 
    }, 900); 

    setTimeout(function() { 
    function count() { 
     $n--; 
     if ($n <= 0) { 
     $('#rainbow-message').hide('fade', 400); 
     $('#rainbow .rainbow').removeClass('rainbow-effect'); 
     setTimeout(function() { 
      $('#rainbow-timing').text($n); 
     }, 200); 
     setTimeout(function() { 
      $('#rainbow').hide(); 
     }, 1000); 
     clearInterval($n); 
     return; 
     } 
     $('#rainbow-timing').text($n); 
    } 
    setInterval(count, 1000); 
    }, 1400); 
} 

$('button').click(Raibow); 

Es ist ein Problem jQuery? Oder die Animation funktioniert seltsam?

Answer 1

Sie löschen das Intervall nicht ordnungsgemäß.

Gemäß der Dokumente

Der zurück timeoutID ist ein numerischer, nicht-Null-Wert, der den Zeitgeber durch den Aufruf von setInterval() erstellt identifiziert; Dieser Wert kann an Window.clearInterval() übergeben werden, um das Zeitlimit abzubrechen.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

so müssen Sie die timeoutID passieren refreshIntervalId in das unten stehende Beispiel clearInterval()

var refreshIntervalId; 

    function count() { 
     $n--; 
     if ($n <= 0) { 
     $('#rainbow-message').hide('fade', 400); 
     $('#rainbow .rainbow').removeClass('rainbow-effect'); 
     setTimeout(function() { 
      $('#rainbow-timing').text($n); 
     }, 200); 
     setTimeout(function() { 
      $('#rainbow').hide(); 
     }, 1000); 
     clearInterval(refreshIntervalId); 
     return; 
     } 
     $('#rainbow-timing').text($n); 
    } 

    setTimeout(function() { 
    refreshIntervalId = setInterval(count, 1000); 
    }, 1400); 

Fiddle: https://jsfiddle.net/405zqzef/