clearInterval – etwas stimmt nicht

Question

Es scheint, dass jeder ein paar Probleme mit clearInterval hat.Ich habe einen Schieberegler erstellt, mit dem Benutzer mit der Maus auf Pfeile klicken können.Das Banner dreht sich auch alle paar Sekunden.Ich möchte die automatische Drehung deaktivieren können, nachdem jemand auf einen der Pfeile geklickt hat.

Hier ist mein Code:

$(function(){
    var intvl = 0;
    intvl = setInterval(heroTransitionNext, 2000);
    $('.rightArrow').click(function(){
       window.clearInterval(intvl);
    });
});

BEARBEITEN:

Hier ist die Funktion, die es aufruft:

function heroTransitionNext() {
    $('.HP-hero li').filter(':visible').fadeOut('normal', function () {
        if ($(this).next().length != 0) {
            activeZone = parseInt(activeZone) + 1;
            $(this).next().fadeIn('normal', heroNavHighlight(activeZone));
        } else {
            activeZone = 1;
            $('.HP-hero li:first-child').fadeIn('normal', heroNavHighlight(activeZone));
        }
        $(this).hide();
    });
};

Answer 1

Um die Animation zu stoppen, können Sie verwenden jquery'S .stop() Ich bin mir aber nicht sicher, ob es das Problem, mit dem Sie konfrontiert sind, lösen wird oder nicht (habe es mir nicht vorgestellt), aber Sie können es versuchen

$('.HP-hero li').stop(1,1); // or try $('.HP-hero li').stop()
window.clearInterval(intvl);

Als say2joe sagte, dass clearInterval stoppt einfach den Aufruf der Funktion beim nächsten Mal, löscht aber nicht die aktuelle Warteschlange (er hat recht), also in diesem Fall stop könnte verwendet werden.

Über Stop.

Answer 2

Je nachdem, wie viel Arbeit Ihre HerotransitionNext-Funktion tut, kann dies immer noch ausgeführt werden, obwohl das Intervall nicht gelöscht wird - mit anderen Worten, das Löschen des Intervalls wird angehalten, dass die Funktion von aufgerufen wird - aber beliebige Instanz der Funktion (s) Ausführen im Speicher, der bis zum Abschluss weiter ausgeführt wird.

Um klarer zu sein, hier ist ein Anwendungsfall (Sie können dies selbst überprüfen, indem Sie einen Profiler in Kamin- oder Entwickler-Tools verwenden):

HerotranSitionNext-Ausführungszeit beträgt 2,1 Sekunden. ClearInterval wird 6,1 Sekunden nach dem Aufrufen von SetInterval aufgerufen. Bei 6,1 Sekunden wurde HerotransitionNext viermal aufgerufen. Die ersten drei Ausführungen haben jedoch abgeschlossen, der vierte wird erst abgeschlossen, bis er die Ausführung abgeschlossen hat (um 8,1 Sekunden, da SetInterval angerufen wurde). HINWEIS: In diesem Anwendungsfall wird jede aufeinanderfolgende Aufforderung ausgeführt, während die Ausführung der letzten Aufforderung weiterhin fortgesetzt wird (für 100 MS) - mit anderen Worten, Sie haben eine Ausführungsüberlappung von 2 bis 2,1, 4 bis 4.1 und 6 an 6.1 zweite Abstände.

Wenn die Funktion länger dauert, um länger als das Intervallsatz auszuführen, verwenden Sie eine rekursive Funktion mit SEALTIMEOUT (). Der folgende Link gibt Ihnen ein gutes Beispiel.

auch eine gute Referenz für die Erläuterung ist https://developer.mozilla.org/ de / dom / fenster.setInval .