web-dev-qa-db-fra.com

Comment créer une pause ou un délai dans la boucle FOR?

Je travaille sur un site Web sur lequel je dois créer une pause ou un délai.
Alors, dites-moi comment créer une pause ou un délai dans une boucle for dans une variable javascript ou jQuery

Ceci est un exemple de test

 var s = document.getElementById("div1");
 for (i = 0; i < 10; i++) {
     s.innerHTML = s.innerHTML + i.toString();
     //create a pause of 2 seconds.
  }
javascriptjqueryfor-loop
16
jams

J'ai essayé tout un, mais je pense que ce code est meilleur, c'est un code très simple.

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);
1
jams

Vous ne pouvez pas utiliser un délai dans la fonction, car la modification apportée à l'élément n'apparaîtra pas tant que vous ne quitterez pas la fonction.

Utilisez la setTimeout pour exécuter des morceaux de code ultérieurement:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {

  // create a closure to preserve the value of "i"
  (function(i){

    window.setTimeout(function(){
      s.innerHTML = s.innerHTML + i.toString();
    }, i * 2000);

  }(i));

}
24
Guffa
var wonderfulFunction = function(i) {
   var s = document.getElementById("div1"); //you could pass this element as a parameter as well
   i = i || 0;
   if(i < 10) {
      s.innerHTML = s.innerHTML + i.toString();

      i++;
      //create a pause of 2 seconds.
      setTimeout(function() { wonderfulFunction(i) }, 2000);          
   }
}

//first call
wonderfulFunction(); //or wonderfulFunction(0);

Vous ne pouvez pas suspendre le code javascript, le langage tout entier est conçu pour fonctionner avec les événements. La solution que j'ai fournie vous permet d'exécuter la fonction avec un certain retard, mais l'exécution ne s'arrête jamais. 

7
nicosantangelo

si vous voulez créer une pause ou un retard dans la boucle FOR, la seule méthode réelle est

while (true) {
    if( new Date()-startTime >= 2000) {
        break;
    }
}

le startTime est le temps avant que vous couriez le moment mais cette méthode causera les navigateurs devient très lent 

2
SKing7

Il est impossible de mettre directement en pause une fonction Javascript dans une boucle for, puis de la reprendre ultérieurement à ce stade.

0
Elliot Bonneville

Le code suivant est un exemple de pseudo-multithreading que vous pouvez effectuer dans JS. Il s'agit en gros d'un exemple montrant comment vous pouvez retarder chaque itération d'une boucle:

var counter = 0;

// A single iteration of your loop
// log the current value of counter as an example
// then wait before doing the next iteration
function printCounter() {
    console.log(counter);
    counter++;
    if (counter < 10)
        setTimeout(printCounter, 1000);
}

// Start the loop    
printCounter();
0
zatatatata

J'exécute une fonction pour laquelle j'ai besoin d'accéder aux propriétés de l'objet extérieur. Donc, la fermeture dans Guffa solution ne fonctionne pas pour moi. J'ai trouvé une variante de nicosantangelo solution en enveloppant simplement setTimeout dans une instruction if afin qu'elle ne s'exécute pas pour toujours.

    var i = 0;
    function test(){

        rootObj.arrayOfObj[i].someFunction();
        i++;
        if( i < rootObj.arrayOfObj.length ){
            setTimeout(test, 50 ); //50ms delay
        }

    }
    test();
0
Sean Novak

Alors que plusieurs des autres réponses fonctionneraient, je trouve le code moins élégant. La bibliothèque Frame.js a été conçue pour résoudre ce problème avec précision. En utilisant Frame, vous pouvez le faire comme ceci:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {
   Frame(2000, function(callback){ // each iteration would pause by 2 secs
      s.innerHTML = s.innerHTML + i.toString();
      callback();
   }); 
}
Frame.start();

Dans ce cas, il est presque identique aux exemples qui utilisent setTimeout, mais Frame offre de nombreux avantages, en particulier si vous essayez d'effectuer plusieurs dépassements de délai ou imbriqués, ou si vous avez une application JS plus grande pour laquelle les délais d'expiration doivent fonctionner. .

0
BishopZ