Comment ajouter un délai dans une boucle JavaScript ?

Question

Je voudrais ajouter un délai/sommeil à l'intérieur d'un fichier while boucle :

J'ai essayé comme ça :

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Seul le premier scénario est vrai : après avoir montré alert('hi') il attendra 3 secondes, puis alert('hello') s'affichera mais ensuite alert('hello') sera constamment répétée.

Ce que je voudrais, c'est qu'après alert('hello') s'affiche 3 secondes après alert('hi') puis il doit attendre 3 secondes pour la deuxième fois. alert('hello') et ainsi de suite.

Answer 1

El setTimeout() est non bloquante et revient immédiatement. Par conséquent, votre boucle va itérer très rapidement et déclencher les déclencheurs de délai de 3 secondes l'un après l'autre en succession rapide. C'est pourquoi votre première alerte apparaît au bout de 3 secondes, et toutes les autres se succèdent sans délai.

Vous pouvez utiliser quelque chose comme ceci à la place :

var i = 1;                  //  set your counter to 1

function myLoop() {         //  create a loop function
  setTimeout(function() {   //  call a 3s setTimeout when the loop is called
    console.log('hello');   //  your code here
    i++;                    //  increment the counter
    if (i < 10) {           //  if the counter < 10, call the loop function
      myLoop();             //  ..  again which will trigger another 
    }                       //  ..  setTimeout()
  }, 3000)
}

myLoop();                   //  start the loop

Vous pourriez également l'améliorer en utilisant une fonction auto-invoquante, en passant le nombre d'itérations comme argument :

(function myLoop(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here                
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(10);                   //  pass the number of iterations as an argument

Answer 2

Essayez quelque chose comme ça :

var i = 0, howManyTimes = 10;

function f() {
  console.log("hi");
  i++;
  if (i < howManyTimes) {
    setTimeout(f, 3000);
  }
}

f();

Answer 3

Une autre méthode consiste à multiplier le délai d'attente, mais notez que cela est pas comme le sommeil . Le code après la boucle sera exécuté immédiatement, seule l'exécution de la fonction de rappel est différée.

for (var start = 1; start < 10; start++)
    setTimeout(function () { alert('hello');  }, 3000 * start);

Le premier délai d'attente sera fixé à 3000 * 1 le second à 3000 * 2 et ainsi de suite.

Answer 4

Je pense que vous avez besoin de quelque chose comme ça :

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

Code de test :

var now = +new Date();

var x = new TimedQueue(2000);

x.add(function(){
    console.log('hey');
    console.log(+new Date() - now);
});
x.add(function(){
    console.log('ho');
    console.log(+new Date() - now);
}, 3000);
x.add(function(){
    console.log('bye');
    console.log(+new Date() - now);
});

x.run();

Remarque : l'utilisation des alertes bloque l'exécution du javascript jusqu'à ce que vous fermiez l'alerte. C'est peut-être plus de code que ce que vous avez demandé, mais c'est une solution robuste et réutilisable.

Answer 5

J'utiliserais probablement setInteval . Comme ça,

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter += period;
}, period);