Comment ajouter un retard dans une boucle JavaScript?

Je voudrais ajouter un délai / sommeil à l'intérieur d'une whileboucle:

Je l'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 affichage alert('hi'), il attendra 3 secondes puis alert('hello')s'affichera mais alert('hello')se répétera constamment.

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

La setTimeout()fonction est non bloquante et reviendra immédiatement. Par conséquent, votre boucle itérera très rapidement et déclenchera successivement des déclencheurs de temporisation de 3 secondes. C'est pourquoi vos premières alertes apparaissent après 3 secondes, et tout le reste se succède sans délai.

Vous voudrez peut-être 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 pouvez également le nettoyer, 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

Essayez quelque chose comme ceci:

var i = 0, howManyTimes = 10;
function f() {
    alert( "hi" );
    i++;
    if( i < howManyTimes ){
        setTimeout( f, 3000 );
    }
}
f();

Si vous utilisez ES6, vous pouvez utiliser letpour y parvenir:

for (let i=1; i<10; i++) {
    setTimeout( function timer(){
        alert("hello world");
    }, i*3000 );
}

Qu'est let- ce que c'est déclarer ipour chaque itération , pas la boucle. De cette façon, ce qui est transmis setTimeoutest exactement ce que nous voulons.

Depuis ES7 il y a une meilleure façon d' attendre une boucle:

// Returns a Promise that resolves after "ms" Milliseconds
function timer(ms) {
 return new Promise(res => setTimeout(res, ms));
}

async function load () { // We need to wrap the loop into an async function for this to work
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // then the created Promise can be awaited
  }
}

load();

Lorsque le moteur atteint la awaitpièce, il définit un délai d'attente et arrête l'exécution de laasync function . Ensuite, lorsque le délai est écoulé, l'exécution se poursuit à ce stade. C'est très utile car vous pouvez retarder (1) les boucles imbriquées, (2) conditionnellement, (3) les fonctions imbriquées:

async function task(i) { // 3
  await timer(1000);
  console.log(`Task ${i} done!`);
}

async function main() {
  for(let i = 0; i < 100; i+= 10) {
    for(let j = 0; j < 10; j++) { // 1
      if(j % 2) { // 2
        await task(i + j);
      }
    }
  }
}
    
main();

function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

Référence sur MDN

Alors que ES7 est désormais pris en charge par NodeJS et les navigateurs modernes, vous voudrez peut-être le transpiler avec BabelJS pour qu'il fonctionne partout.

Une autre façon consiste à multiplier le délai d'expiration, mais notez que ce n'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);

La première temporisation sera définie sur 3000 * 1, la seconde sur 3000 * 2et ainsi de suite.

Cela fonctionnera

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { console.log(i); }, 100 * i);
  })(i);
}

Essayez ce violon: https://jsfiddle.net/wgdx8zqq/

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 d'alertes bloque l'exécution de javascript jusqu'à la fermeture de l'alerte. Il peut s'agir de plus de code que vous n'en avez demandé, mais il s'agit d'une solution robuste et réutilisable.

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);

Dans ES6 (ECMAScript 2015), vous pouvez itérer avec retard avec générateur et intervalle.

Les générateurs, une nouvelle fonctionnalité d'ECMAScript 6, sont des fonctions qui peuvent être suspendues et reprises. L'appel de genFunc ne l'exécute pas. Au lieu de cela, il retourne un soi-disant objet générateur qui nous permet de contrôler l'exécution de genFunc. genFunc () est initialement suspendu au début de son corps. La méthode genObj.next () continue l'exécution de genFunc, jusqu'au prochain rendement. (Explorer ES6)

Exemple de code:

let arr = [1, 2, 3, 'b'];
let genObj = genFunc();

let val = genObj.next();
console.log(val.value);

let interval = setInterval(() => {
  val = genObj.next();
  
  if (val.done) {
    clearInterval(interval);
  } else {
    console.log(val.value);
  }
}, 1000);

function* genFunc() {
  for(let item of arr) {
    yield item;
  }
}

Donc, si vous utilisez ES6, c'est la façon la plus élégante de réaliser une boucle avec retard (à mon avis).

Vous pouvez utiliser l' opérateur d'intervalle RxJS . L'intervalle émet un entier toutes les x nombre de secondes, et prend est spécifier le nombre de fois où il doit émettre des nombres

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>

Je pensais juste publier mes deux cents ici aussi. Cette fonction exécute une boucle itérative avec un retard. Voir ce jsfiddle . La fonction est la suivante:

function timeout(range, time, callback){
    var i = range[0];                
    callback(i);
    Loop();
    function Loop(){
        setTimeout(function(){
            i++;
            if (i<range[1]){
                callback(i);
                Loop();
            }
        }, time*1000)
    } 
}

Par exemple:

//This function prints the loop number every second
timeout([0, 5], 1, function(i){
    console.log(i);
});

Serait équivalent à:

//This function prints the loop number instantly
for (var i = 0; i<5; i++){
    console.log(i);
}

Je fais cela avec Bluebird's Promise.delayet récursivité.

function myLoop(i) {
  return Promise.delay(1000)
    .then(function() {
      if (i > 0) {
        alert('hello');
        return myLoop(i -= 1);
      }
    });
}

myLoop(3);

<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js"></script>

Dans ES6, vous pouvez procéder comme suit:

 for (let i = 0; i <= 10; i++){       
     setTimeout(function () {   
        console.log(i);
     }, i*3000)
 }

Dans ES5, vous pouvez faire comme:

for (var i = 0; i <= 10; i++){
   (function(i) {          
     setTimeout(function () {   
        console.log(i);
     }, i*3000)
   })(i);  
 }

La raison en est, letvous permet de déclarer des variables qui sont limitées à la portée d'une instruction de bloc, ou une expression sur laquelle elle est utilisée, contrairement au varmot clé, qui définit une variable globalement, ou localement à une fonction entière quelle que soit la portée du bloc.

    var startIndex = 0;
    var data = [1, 2, 3];
    var timeout = 1000;

    function functionToRun(i, length) {
      alert(data[i]);
    }

    (function forWithDelay(i, length, fn, delay) {
      setTimeout(function() {
        fn(i, length);
        i++;
        if (i < length) {
          forWithDelay(i, length, fn, delay);
        }
      }, delay);
    })(startIndex, data.length, functionToRun, timeout);

Une version modifiée de la réponse de Daniel Vassallo, avec des variables extraites en paramètres pour rendre la fonction plus réutilisable:

Définissons d'abord quelques variables essentielles:

var startIndex = 0;
var data = [1, 2, 3];
var timeout = 3000;

Ensuite, vous devez définir la fonction que vous souhaitez exécuter. Cela passera i, l'index actuel de la boucle et la longueur de la boucle, au cas où vous en auriez besoin:

function functionToRun(i, length) {
    alert(data[i]);
}

Version auto-exécutable

(function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
})(startIndex, data.length, functionToRun, timeout);

Version fonctionnelle

function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
}

forWithDelay(startIndex, data.length, functionToRun, timeout); // Lets run it

   let counter =1;
   for(let item in items) {
        counter++;
        setTimeout(()=>{
          //your code
        },counter*5000); //5Sec delay between each iteration
    }

Tu le fais:

console.log('hi')
let start = 1
setTimeout(function(){
  let interval = setInterval(function(){
    if(start == 10) clearInterval(interval)
    start++
    console.log('hello')
  }, 3000)
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

/* 
  Use Recursive  and setTimeout 
  call below function will run loop loopFunctionNeedCheck until 
  conditionCheckAfterRunFn = true, if conditionCheckAfterRunFn == false : delay 
  reRunAfterMs miliseconds and continue loop
  tested code, thanks
*/

function functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn,
 loopFunctionNeedCheck) {
    loopFunctionNeedCheck();
    var result = conditionCheckAfterRunFn();
    //check after run
    if (!result) {
        setTimeout(function () {
            functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn, loopFunctionNeedCheck)
        }, reRunAfterMs);
    }
    else  console.log("completed, thanks");    
            //if you need call a function after completed add code call callback in here
}

//passing-parameters-to-a-callback-function
// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
    Function.prototype.bind = function () {
        var fn = this, args = Array.prototype.slice.call(arguments),
            object = args.shift();
        return function () {
            return fn.apply(object,
              args.concat(Array.prototype.slice.call(arguments)));
        };
    };
}

//test code: 
var result = 0; 
console.log("---> init result is " + result);
var functionNeedRun = function (step) {           
   result+=step;    
       console.log("current result is " + result);  
}
var checkResultFunction = function () {
    return result==100;
}  

//call this function will run loop functionNeedRun and delay 500 miliseconds until result=100    
functionRepeatUntilConditionTrue(500, checkResultFunction , functionNeedRun.bind(null, 5));

//result log from console:
/*
---> init result is 0
current result is 5
undefined
current result is 10
current result is 15
current result is 20
current result is 25
current result is 30
current result is 35
current result is 40
current result is 45
current result is 50
current result is 55
current result is 60
current result is 65
current result is 70
current result is 75
current result is 80
current result is 85
current result is 90
current result is 95
current result is 100
completed, thanks
*/

Voici comment j'ai créé une boucle infinie avec un retard qui se casse à une certaine condition:

  // Now continuously check the app status until it's completed, 
  // failed or times out. The isFinished() will throw exception if
  // there is a failure.
  while (true) {
    let status = await this.api.getStatus(appId);
    if (isFinished(status)) {
      break;
    } else {
      // Delay before running the next loop iteration:
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }

La clé ici est de créer une nouvelle promesse qui se résout par timeout, et d'attendre sa résolution.

Évidemment, vous avez besoin d'un support asynchrone / wait pour cela. Fonctionne dans le nœud 8.

pour une utilisation courante "oubliez les boucles normales" et utilisez cette combinaison de "setInterval", y compris "setTimeOut": comme ceci (de mes tâches réelles).

        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 commenceront tous en même temps "les trois bla bla bla commenceront à décompter au même moment" alors faites un timeout différent pour organiser l'exécution.

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

À ma connaissance, la setTimeoutfonction est appelée de manière asynchrone. Ce que vous pouvez faire est d'enrouler la boucle entière dans une fonction asynchrone et d'attendre un Promisequi contient le setTimeout comme indiqué:

var looper = async function () {
  for (var start = 1; start < 10; start++) {
    await new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("iteration: " + start.toString());
        resolve(true);
      }, 1000);
    });
  }
  return true;
}

Et puis vous appelez l'exécuter comme suit:

looper().then(function(){
  console.log("DONE!")
});

Veuillez prendre un peu de temps pour bien comprendre la programmation asynchrone.

Essayez ceci

 var arr = ['A','B','C'];
 (function customLoop (arr, i) {
    setTimeout(function () {
    // Do here what you want to do.......
    console.log(arr[i]);
    if (--i) {                
      customLoop(arr, i); 
    }
  }, 2000);
})(arr, arr.length);

Résultat

A // after 2s
B // after 2s
C // after 2s

Voici une fonction que j'utilise pour boucler sur un tableau:

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i "+i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

Vous l'utilisez comme ceci:

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

Ce script fonctionne pour la plupart des choses

function timer(start) {
    setTimeout(function () { //The timer
        alert('hello');
    }, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}

for(var start = 1; start < 10; start++) {
    timer(start);
}

Essaye ça...

var icount=0;
for (let i in items) {
   icount=icount+1000;
   new beginCount(items[i],icount);
}

function beginCount(item,icount){
  setTimeout(function () {

   new actualFunction(item,icount);

 }, icount);
}

function actualFunction(item,icount){
  //...runs ever 1 second
 console.log(icount);
}

Implémentation simple de l'affichage d'un morceau de texte toutes les deux secondes tant que la boucle est en cours d'exécution.

for (var i = 0; i < foo.length; i++) {
   setInterval(function(){ 
     console.log("I will appear every 2 seconds"); 
   }, 2000);
  break;
};

Essaye ça

//the code will execute in 1 3 5 7 9 seconds later
function exec(){
  for(var i=0;i<5;i++){
   setTimeout(function(){
     console.log(new Date());   //It's you code
   },(i+i+1)*1000);
  }
}