Ndtyjky

Try something like this:

var i = 0, howManyTimes = 10;

function f() {

    alert( "hi" );

    i++;

    if( i < howManyTimes ){

        setTimeout( f, 3000 );

    }

}

f();

If using ES6, you could use let to achieve this:

for (let i=1; i<10; i++) {

    setTimeout( function timer(){

        alert("hello world");

    }, i*3000 );

}

What let does is declare i for each iteration, not the loop. This way, what is passed to setTimeout is exactly what we want.

Another way is to multiply the time to timeout, but note that this is not like sleep. Code after the loop will be executed immediately, only the execution of the callback function is deferred.

for (var start = 1; start < 10; start++)

    setTimeout(function () { alert('hello');  }, 3000 * start);

The first timeout will be set to 3000 * 1, the second to 3000 * 2 and so on.

Since ES7 theres a better way to await a loop:

function timer(ms) {

 return new Promise(res => setTimeout(res, ms));

}



async function load () {

  for (var i = 0; i < 3; i++) {

    console.log(i);

    await timer(3000);

  }

}



load();

Reference on MDN

Note that ES7 is rarely supported today, so you need to transpile with Babel to use it everywhere.

Transpiled

I think you need something like this:

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;

    }

}

Test code:

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

Note: using alerts stalls javascript execution till you close the alert.
It might be more code than you asked for, but this is a robust reusable solution.

I would probably use setInteval. Like this,

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

This will work

for (var i = 0; i < 10; i++) {

    (function(i) {

        setTimeout(function() { console.log(i); }, 100 * i);

    })(i);

}

Try this fiddle: https://jsfiddle.net/wgdx8zqq/

In ES6 (ECMAScript 2015) you can iterate with delay with generator and interval.

Generators, a new feature of ECMAScript 6, are functions that can be
paused and resumed. Calling genFunc does not execute it. Instead, it
returns a so-called generator object that lets us control genFunc’s
execution. genFunc() is initially suspended at the beginning of its
body. The method genObj.next() continues the execution of genFunc,
until the next yield.
(Exploring ES6)

Code example:

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;

  }

}

So if you are using ES6, that the most elegant way to achieve loop with delay (for my opinion).

I do this with Bluebird’s Promise.delay and recursion.

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>

Just thought I'd post my two cents here as well. This function runs an iterative loop with a delay. See this jsfiddle. The function is as follows:

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)

    } 

}

For example:

//This function prints the loop number every second

timeout([0, 5], 1, function(i){

    console.log(i);

});

Would be equivalent to:

//This function prints the loop number instantly

for (var i = 0; i<5; i++){

    console.log(i);

}

You can use RxJS interval operator. Interval emits integer every x number of seconds, and take is specify number of times it has to emit numberss

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>

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

A modified version of Daniel Vassallo's answer, with variables extracted into parameters to make the function more reusable:

First let's define some essential variables:

var startIndex = 0;

var data = [1, 2, 3];

var timeout = 3000;

Next you should define the function you want to run. This will get passed i, the current index of the loop and the length of the loop, in case you need it:

function functionToRun(i, length) {

    alert(data[i]);

}

Self-executing version

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

Functional version

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

/* 

  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

*/

Here is how I created an infinite loop with a delay that breaks on a certain 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));

    }

  }

The key here is to create a new Promise that resolves by timeout, and to await for its resolution.

Obviously you need async/await support for that. Works in Node 8.

for common use "forget normal loops" and use this combination of "setInterval" includes "setTimeOut"s: like this (from my real tasks).

        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: Understand that the real behavior of (setTimeOut): they all will start in same time "the three bla bla bla will start counting down in the same moment" so make a different timeout to arrange the execution.

PS 2: the example for timing loop, but for a reaction loops you can use events, promise async await ..

Simple implementation of showing a piece of text every two seconds as long the loop is running.

for (var i = 0; i < foo.length; i++) {

   setInterval(function(){ 

     console.log("I will appear every 2 seconds"); 

   }, 2000);

  break;

};

To my knowledge the setTimeout function is called asynchronously. What you can do is wrap the entire loop within an async function and await a Promise that contains the setTimeout as shown:

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;

}

And then you call run it like so:

looper().then(function(){

  console.log("DONE!")

});

Please take some time to get a good understanding of asynchronous programming.

Here is a function that I use for looping over an 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);

    }

}

You use it like this:

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){

    //Do something with item

}, function(i){

    //Do something once loop has completed

}

This script works for most things

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

}

Try this...

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

}

Try this

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

  }

}