clearInterval - algo está errado

Question

Parece que todo mundo tem alguns problemas com clearInterval.Eu construí um controle deslizante que permite às pessoas passar o mouse e clicar nas setas.O banner também gira a cada poucos segundos.Quero poder desligar a rotação automática depois que alguém clicar em uma das setas.

Aqui está meu código:

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

EDITAR:

Aqui está a função que ele está chamando:

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 parar a animação você pode usar jqueryde .stop() mas não tenho certeza se isso resolverá ou não o problema que você está enfrentando (não visualizou), mas você pode tentar

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

Como say2joe disse isso clearInterval apenas impedirá que a função seja invocada na próxima vez, mas não limpará a fila atual (ele está certo), então nesse caso stop poderia ser usado.

Sobre parar.

Answer 2

Dependendo de quanto trabalho sua função heroTransitionNext está realizando, ela ainda pode estar em execução mesmo que o intervalo seja limpo - em outras palavras, limpar o intervalo impedirá que a função seja invocada - mas, qualquer instância da(s) função(ões) a execução na memória continuará a ser executada até terminar.

Para ser mais claro, aqui está um caso de uso (você pode verificar isso usando um criador de perfil no Firebug ou Ferramentas de desenvolvedor):

O tempo de execução de heroTransitionNext é de 2,1 segundos.clearInterval é invocado 6,1 segundos após setInterval ser invocado.Aos 6,1 segundos, heroTransitionNext foi invocado quatro vezes.As três primeiras execuções foram concluídas, no entanto, a quarta não será concluída até terminar a execução (8,1 segundos desde que setInterval foi chamado).Observação:Neste caso de uso, cada invocação sucessiva será executada enquanto a execução da última invocação ainda continua (por mais 100 ms) - em outras palavras, você terá sobreposição de execução de 2 a 2,1, 4 a 4,1 e 6 a 6,1 segundos intervalos.

Se a função demorar mais para ser executada do que o intervalo definido, use uma função recursiva com setTimeout().O link a seguir lhe dará um bom exemplo.

Além disso, uma boa referência para explicação é https://developer.mozilla.org/en/DOM/window.setInterval.