clearInterval: algo anda mal

Question

Parece que todo el mundo tiene algunos problemas con clearInterval.He creado un control deslizante que permite a las personas hacer clic en las flechas.El banner también gira cada pocos segundos.Quiero poder desactivar la rotación automática después de que alguien haga clic en una de las flechas.

Aquí está mi código:

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

EDITAR:

Aquí está la función que está llamando:

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

Para detener la animación puedes usar jquery's .stop() pero no estoy seguro de si resolverá o no el problema al que te enfrentas (no lo visualizaste), pero puedes intentarlo

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

Como say2joe dijo eso clearInterval simplemente detendrá la invocación de la función la próxima vez, pero no borrará la cola actual (tiene razón), así que en ese caso stop puede ser usado.

Acerca de Detener.

Answer 2

Dependiendo de la cantidad de trabajo que está haciendo su función HerotransitionNext, aún puede estar ejecutando aunque el intervalo se borra, en otras palabras, eliminar el intervalo evitará que la función se invoque de la función, pero, cualquier instancia de la función (s) la ejecución en la memoria continuará ejecutándose hasta que termine.

Para ser más claros, aquí hay un caso de uso (puede verlo a sí mismo utilizando un perfilador en Firebug o Herramientas de desarrollador):

HerotransitionNext Ejecución El tiempo es de 2.1 segundos. ClearInterval se invoca 6.1 segundos después de que se invoca SetInterval. A los 6.1 segundos, HerotransitionNext ha sido invocada cuatro veces. Sin embargo, las primeras tres ejecuciones han completado, el cuarto no se completará hasta que finalice la ejecución (a 8.1 segundos, ya que se llamó a SetInterval). Nota: En este caso de uso, cada invocación sucesiva se ejecutará mientras la última ejecución de la invocación sigue continuando (para 100 ms), en otras palabras, tendrá una superposición de ejecución de 2 a 2.1, 4 a 4.1 y 6 a 6.1 Segundo intervalos.

Si la función tarda más en ejecutar que el conjunto de intervalo, use una función recursiva con Settimeout (). El siguiente enlace le dará un buen ejemplo.

Además, una buena referencia para la explicación es https://developer.mozilla.org/ en / dom / window.setinterval .