Come faccio ad aggiungere un ritardo in un ciclo JavaScript?

Vorrei aggiungere un ritardo / sospensione all'interno di a while loop:

L'ho provato in questo modo:

alert('hi');

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

È vero solo il primo scenario: dopo averlo mostrato alert('hi'), attenderà 3 secondi quindi alert('hello')verrà visualizzato ma poi alert('hello')sarà ripetutamente in modo continuo.

Quello che vorrei è che dopo alert('hello')viene mostrato 3 secondi dopo, alert('hi')quindi deve attendere 3 secondi per la seconda volta alert('hello')e così via.

La setTimeout()funzione non è bloccante e tornerà immediatamente. Pertanto, il ciclo eseguirà un'iterazione molto rapida e verrà avviato il timeout di 3 secondi che si innesca uno dopo l'altro in rapida successione. Questo è il motivo per cui i primi avvisi vengono visualizzati dopo 3 secondi e tutto il resto segue in successione senza alcun ritardo.

Potresti voler usare qualcosa del genere invece:

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

Puoi anche migliorarlo, usando una funzione auto-invocante, passando il numero di iterazioni come argomento:

(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

Prova qualcosa del genere:

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

Se si utilizza ES6, è possibile utilizzare letper raggiungere questo obiettivo:

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

Quello che letfa è dichiarare iper ogni iterazione , non il ciclo. In questo modo, ciò che viene passato setTimeoutè esattamente ciò che vogliamo.

Da ES7 esiste un modo migliore per attendere un loop:

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

Quando il motore raggiunge la awaitparte, imposta un timeout e interrompe l'esecuzione diasync function . Quindi al termine del timeout, l'esecuzione continua a quel punto. È abbastanza utile in quanto puoi ritardare (1) loop nidificati, (2) in modo condizionale, (3) funzioni nidificate:

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

Riferimento su MDN

Mentre ES7 è ora supportato da NodeJS e dai browser moderni, potresti volerlo trasferire con BabelJS in modo che funzioni ovunque.

Un altro modo è moltiplicare il tempo di timeout, ma nota che non è come dormire . Il codice dopo il ciclo verrà eseguito immediatamente, verrà rimandata solo l'esecuzione della funzione di richiamata.

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

Il primo timeout verrà impostato su 3000 * 1, il secondo su 3000 * 2e così via.

Questo funzionerà

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

Prova questo violino: https://jsfiddle.net/wgdx8zqq/

Penso che tu abbia bisogno di qualcosa del genere:

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

Codice di prova:

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

Nota: l'utilizzo degli avvisi blocca l'esecuzione di javascript fino alla chiusura dell'avviso. Potrebbe essere più codice di quanto richiesto, ma questa è una soluzione riutilizzabile solida.

Probabilmente userei setInteval. Come questo,

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

In ES6 (ECMAScript 2015) puoi iterare con ritardo con generatore e intervallo.

I generatori, una nuova funzionalità di ECMAScript 6, sono funzioni che possono essere messe in pausa e riprese. Chiamare genFunc non lo esegue. Al contrario, restituisce un cosiddetto oggetto generatore che ci consente di controllare l'esecuzione di genFunc. genFunc () è inizialmente sospeso all'inizio del suo corpo. Il metodo genObj.next () continua l'esecuzione di genFunc, fino alla resa successiva. (Esplorando ES6)

Esempio di codice:

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

Quindi, se stai usando ES6, questo è il modo più elegante per ottenere un loop con ritardo (a mio avviso).

È possibile utilizzare l' operatore di intervallo RxJS . L'intervallo emette un numero intero ogni x numero di secondi e take indica il numero di volte in cui deve emettere numeri

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>

Ho pensato di pubblicare anche qui i miei due centesimi. Questa funzione esegue un ciclo iterativo con un ritardo. Vedi questo jsfiddle . La funzione è la seguente:

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

Per esempio:

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

Sarebbe equivalente a:

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

Lo faccio con Bluebird Promise.delaye la ricorsione.

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>

In ES6 puoi fare come segue:

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

In ES5 puoi fare come:

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

Il motivo è che letconsente di dichiarare variabili limitate a un ambito di un'istruzione di blocco o espressione su cui viene utilizzato, a differenza della varparola chiave, che definisce una variabile a livello globale o localmente a un'intera funzione indipendentemente dall'ambito del blocco.

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

Una versione modificata della risposta di Daniel Vassallo, con variabili estratte in parametri per rendere più riutilizzabile la funzione:

Per prima cosa definiamo alcune variabili essenziali:

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

Successivamente è necessario definire la funzione che si desidera eseguire. Questo verrà superato i, l'indice corrente del loop e la lunghezza del loop, nel caso in cui ne abbiate bisogno:

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

Versione autoeseguente

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

Versione funzionale

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
    }

Lo fai:

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
*/

Ecco come ho creato un ciclo infinito con un ritardo che si interrompe a una determinata condizione:

  // 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 chiave qui è creare una nuova promessa che si risolve con il timeout e attendere la sua risoluzione.

Ovviamente hai bisogno di supporto asincrono / attendi per quello. Funziona nel nodo 8.

per uso comune "dimentica i normali cicli" e usa questa combinazione di "setInterval" include "setTimeOut" s: in questo modo (dai miei compiti reali).

        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: Comprendi che il vero comportamento di (setTimeOut): tutti inizieranno nello stesso momento "i tre bla bla bla inizieranno il conto alla rovescia nello stesso momento" quindi fai un timeout diverso per organizzare l'esecuzione.

PS 2: l'esempio per il loop di temporizzazione, ma per i loop di reazione puoi usare gli eventi, prometti che async ti aspetta ..

Per quanto ne sappia, la setTimeoutfunzione viene chiamata in modo asincrono. Quello che puoi fare è avvolgere l'intero ciclo all'interno di una funzione asincrona e attendere un Promiseche contenga setTimeout come mostrato:

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

E poi lo chiami corri in questo modo:

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

Ti preghiamo di dedicare un po 'di tempo per capire bene la programmazione asincrona.

Prova questo

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

Risultato

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

Ecco una funzione che utilizzo per eseguire il looping su un array:

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

Lo usi in questo modo:

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

Questo script funziona per la maggior parte delle cose

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

Prova questo...

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

Implementazione semplice di mostrare un pezzo di testo ogni due secondi per tutto il ciclo di esecuzione.

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

Prova questo

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