clearInterval - quelque chose ne va pas

Question

Il semble que tout le monde ait quelques problèmes avec clearInterval.J'ai construit un curseur qui permet aux gens de survoler un clic sur les flèches.La bannière tourne également toutes les quelques secondes.Je souhaite pouvoir désactiver la rotation automatique après que quelqu'un a cliqué sur l'une des flèches.

Voici mon code :

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

MODIFIER:

Voici la fonction qu'il appelle :

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

Pour arrêter l'animation, vous pouvez utiliser jqueryc'est .stop() mais je ne sais pas si cela résoudra ou non le problème auquel vous êtes confronté (je n'ai pas visualisé), mais vous pouvez essayer

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

Comme say2joe dit que clearInterval empêchera simplement la fonction d'être invoquée la prochaine fois mais cela n'effacera pas la file d'attente actuelle (il a raison), donc dans ce cas stop peut être utilisé.

À propos de l'arrêt.

Answer 2

Selon le fonctionnement de votre fonctionnement de HerotransitionNext, il peut toujours être exécuté même si l'intervalle est effacé - en d'autres termes, le nettoyage de l'intervalle arrêtera la fonction d'être invoquée - mais, toute instance de la fonction (s) L'exécution en mémoire continuera à exécuter jusqu'à la fin.

Pour être plus clair, voici un cas d'utilisation (vous pouvez consulter cela à l'aide d'un profileur en Firebug ou outils de développeur):

Le temps d'exécution de HerotransitionNext est de 2,1 secondes. ClearInterval est invoqué 6,1 secondes après que Sintinval est invoquée. À 6,1 secondes, HerotransitionNext a été invoqué quatre fois. Les trois premières exécutions ont toutefois terminé, cependant, le quatrième ne sera terminé qu'au cours de la fin d'exécution (à 8,1 secondes puisque seinterval a été appelée). Remarque: dans ce cas d'utilisation, chaque invocation successive s'exécutera alors que la dernière exécution de l'invocation continue toujours (pour 100 ms supplémentaires) - autrement dit, vous aurez des chevauchements d'exécution de 2 à 2.1, 4 à 4.1 et 6 à 6.1 secondes intervalles.

Si la fonction prend plus de temps à exécuter que l'intervalle, utilisez une fonction récursive avec SetTimeOut (). Le lien suivant vous donnera un bon exemple.

En outre, une bonne référence pour l'explication est https://developer.mozilla.org/ EN / DOM / WINDOW.SETIVERTAL .