Pourquoi clearTimeout avec l'argument millisec ne fonctionne pas ?

Question

Je suis en train de construire un simple rotateur de bannières. Le fait est que, lorsqu'il tourne sans qu'aucun bouton ne soit pressé, il fonctionne bien, mais lorsque j'appuie sur un bouton pour changer la bannière et effacer l'heure, il ne fonctionne pas.

On dirait que l'heure n'est pas claire.

        var tempo = 5000;
        var elemento;
        var quantos;
        var atual;

        // Inicia

        $(document).ready(function() {
            bannerRotator("#destaques");

        });

        // Funções do Banner

        function bannerRotator(element) {

            // Conta quantos banners existem:
            $('<ul class="buttons"></ul>').appendTo(element);
            i = 0;
            $(element).find(".banner").each(function() {
                $(element).find(".banner").eq(i).addClass("id"+i);
                buttons = element+" ul.buttons";
                acId = i+1;
                $('<li><a href="javascript:getBanner('+i+');">'+acId+'</a></li>').appendTo(buttons);
                i++;
            });

            // Inicia a rotacao
            elemento = element;
            quantos = i;
            rotate(i,-1);

        }

        function getBanner(r) {
            r = r-1;
            rotate(quantos, r);
        }

        function rotate(i, base) {

            clearTimeout(tempo);

            if (base<i-1) {
                base++;
                atual = base;
                setTimeout('rotate('+i+', '+base+');', tempo);
            }
            else {
                base = 0;
                atual = base;
                setTimeout('rotate('+i+', '+base+');', tempo);
            }

            // Faz os fades

            $(elemento).find(".banner").animate({opacity: 0,});
            $(elemento).find(".banner").eq(base).animate({opacity: 1,});

            // Arruma os botoes

            $(elemento).find("ul.buttons li").removeClass("active");
            $(elemento).find("ul.buttons li").eq(base).addClass("active");

        }

Answer 1

Parce que vous utilisez clearTimeout() incorrectement. Votre code doit ressembler à ce qui suit :

var x = setTimeout("doStuff();", tempo);
clearTimeout(x);

Vous utilisez actuellement tempo comme poignée de délai, c'est pourquoi cela ne fonctionne pas.

Answer 2

Utilisez le retour de setTimeout pour le transmettre à la clearTimeout fonction :

var timeoutId = setTimeout(callBack, 1000);
//then, later in the code
clearTimeout(timeoutId);

Answer 3

Pour utiliser clearTimeout vous devez lui transmettre la valeur renvoyée par un appel à la fonction setTimeout .

var timeout;
// ...
timeout = setTimeout('rotate('+i+', '+base+');', tempo);
// ...
clearTimeout(timeout);

Answer 4

Vous effacez le délai d'attente avec le résultat retourné par setTimeout...

var x = setTimeout(functionPointer, 500);
clearTimeout(x);

Answer 5

Lorsque vous appelez setTimeout, il renvoie un identifiant. C'est ce qui doit être passé à clearTimeout.