Das Wiederstarten eines setInterval

Question

Also habe ich einen Timer, der alle 5 Sekunden eine Reihe von Bildern dreht. Deshalb führe ich dies beim Starten des Dokuments aus.

$(document).ready(function() {
var intervalID=setInterval(function(){ 
     rotate();    
}, 5000);
});

Die Rotate-Funktion dreht einfach nur die Bilder. Allerdings erlaube ich dem Benutzer auch manuell auszuwählen, welches Bild sie betrachten möchten. Aus diesem Grund muss ich das SetInterval abbrechen und dann wieder bei 5 Sekunden neu starten

Was ich versuche zu tun ist das Intervall abzubrechen und dann neu zu starten, indem ich dies mache

$('a').click(function(){
 clearInterval(intervalID);   
 intervalID=setInterval(function(){ 
     rotate();    
}, 5000);    
});

Allerdings scheint der Code das Intervall nicht wie erhofft zurückzusetzen.

Answer 1

Wenn die Variable intervalID innerhalb des .ready()-Bereichs deklariert ist, sollte Folgendes funktionieren (nicht getestet):

$(document).ready(function() {
    var rotate = function() { ... },
        intervalID = setInterval(rotate, 5000);

    $('a').click(function() {
       clearInterval(intervalID);   
       intervalID = setInterval(rotate, 5000);    
    });
});

Answer 2

Mache einfach intervalID zu einer globalen Variablen, indem du sie außerhalb und oberhalb aller Funktionen deklarierst.

Mit deinem aktuellen Code ist ihr Geltungsbereich auf die $(document).ready()-Methode beschränkt, was das von dir beschriebene Problem verursachen könnte.

Answer 3

Nun, es scheint, dass du intervalID lokal innerhalb der anonymen Funktion aus deinem .ready() Handler deklarierst. Ich frage mich eigentlich, warum du keinen Referenzfehler in deinem Klick-Event-Handler bekommst, da intervalID dort nicht bekannt sein kann.

Du musst sicherstellen, dass diese Variable verfügbar ist und einen gemeinsamen Kontext für beide Funktionen hat. Der einfachste Weg ist, eine anonyme selbstaufrufende Methode um deinen Skript zu erstellen und diese Variable außerhalb des Bereichs zu deklarieren.

(function _myPrivateContext($, window, document, undefined) {
    var intervalID = null;

    $(document).ready(function() {
       intervalID = setInterval(rotate, 5000);
    });

    $('a').click(function(){
        clearInterval(intervalID);   
        intervalID = setInterval(rotate, 5000);    
    });

}(jQuery, window, document));