web-dev-qa-db-fra.com

Comment créer une simple boucle setTimeout

J'ai simplement besoin de créer une boucle infinie à travers 3 variations d'un élément. Voici ce que j'ai jusqu'à présent:

    var count = 1;
    setTimeout(transition, 2000);

    function transition() {

        if(count == 1) {
            $('#ele').html('variation 2');
            var count = 2;

        } else if(count == 2) {
            $('#ele').html('variation 3');
            var count = 3;

        } else if(count == 3) {
            $('#ele').html('variation 1');
            var count = 1;
        }

        setTimeout(transition, 2000);

    }
jqueryloopssettimeout
11
Mythical Fish

essayez ça:

var count = 1;

function transition() {

    if(count == 1) {
        $('#ele').html('variation 2');
         count = 2;

    } else if(count == 2) {
        $('#ele').html('variation 3');
         count = 3;

    } else if(count == 3) {
        $('#ele').html('variation 1');
        count = 1;
    }

}
setInterval(transition, 2000);
17
Molochdaa

Si vous voulez une boucle infinie, vous devriez utiliser setInterval(). Cela exécutera une boucle infinie, à chaque fois la variante suivante:

var i=0;

setInterval(function() {
    switch(i++%3) {
        case 0: alert("variation 1");
        break;
        case 1: alert("variation 2");
        break;
        case 2: alert("variation 3");
        break;
    }

}, 2000);

Si vous décidez par la suite que vous devez arrêter le code répété, enregistrez la valeur de retour lorsque vous définissez l'intervalle et effacez-le:

var intervalId = setInterval(function() {
    ...
}, 1000);

clearInterval(intervalId);
11
DonVaughn

C'est la meilleure solution:

La méthode clearTimeout () efface un minuteur défini avec la méthode setTimeout () .

(function(){
    var timer, count=1;
    function transition(){
        clearTimeout(timer);

        switch(count){
            case 1: count = 2; break;
            case 2: count = 3; break;
            case 3: count = 1; break;
        }

        $('#ele').html('variation ' + count);

        timer = setTimeout(transition, 2000);
    }
    transition();
})();
2
Andres Separ

Mon meilleur moyen dans la vie réelle consiste à "oublier les boucles de base" dans ce cas, et à utiliser cette combinaison de "setInterval" et de "setTimeOut":

    function iAsk(lvl){
        var i=0;
        var intr =setInterval(function(){ // start the loop 
            i++; // increment it
            if(i>lvl){ // check if the end round reached.
                clearInterval(intr);
                return;
            }
            setTimeout(function(){
                $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
            },50);
            setTimeout(function(){
                 // do another bla bla bla after 100 millisecond.
                seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                $("#hh").after('<br>'+i + ' : Rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                $("#d"+seq[i-1]).prop("src",pGif);
                var d =document.getElementById('aud');
                d.play();                   
            },100);
            setTimeout(function(){
                // keep adding bla bla bla till you done :)
                $("#d"+seq[i-1]).prop("src",pPng);
            },900);
        },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
    }

PS: Comprenez que le comportement réel de (setTimeOut): ils vont tous commencer dans le même temps "les trois bla bla bla commenceront à décompter au même moment" alors faites un temps différent pour organiser l'exécution.

PS 2: l'exemple pour la boucle de synchronisation, mais pour une boucle de réaction, vous pouvez utiliser des événements, promettez async en attente.

0
Mohamed Abulnasr

Vous avez var devant votre variable count dans la fonction transition. Supprimez-les et la variable count extérieure conservera sa valeur.

0
Jim H.

si vous voulez toujours utiliser setTimeout et clearTimeout pour créer une boucle , vous devriez utiliser quelque chose comme cette structure pour votre boucle 

           var count = 1;
           var timer = setTimeout( function(){
                            transaction();
                            } , 2000);

           function transition() {

                if(count == 1) {
                 $('#ele').html('variation 2');
                         count = 2;

                   } else if(count == 2) {
                   $('#ele').html('variation 3');
                        count = 3;

                 } else if(count == 3) {
                 $('#ele').html('variation 1');
                       count = 1;
                      }
                   //if(condition for continue) 
                     setTimeout(transition, 2000);
                     //else if you want to stop the loop
                   //clearTimeout(timer, 2000);
                 }
0
Gholamreza Fathpour