Each iteration, delay the execution

Question

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

        (function(index) {

           ajaxFuncHere(i);


            //now you can also loop an ajax call here without problems: $.ajax({});
        })(i);

    }

I would like to delay each iteration with say 300 ms or something, how can I do that?

I tried putting a setTimeout like this:

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

        (function(index) {

          setTimeout(function () {
           ajaxFuncHere(i);
          }, 300);          

            //now you can also loop an ajax call here without problems: $.ajax({});
        })(i);

    }

However its not giving me the desired result, but instead just delaying and then put them all out.

How can I delay each iteration with 300 ms after the function itself is completed, (the reason I use the closure within)

setTimeOut() doesn't stop processing, it just says "do this function in X ms". — Nzall, Jul 09 '14 at 13:55

jlahd · Answer 1 · 2014-07-09T13:59:37.123

1

Delay them incrementally.

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

    (function(index) {

      setTimeout(function () {
       ajaxFuncHere(index);
      }, 300*(index+1));

    })(i);
}

edited Jul 09 '14 at 13:59

answered Jul 09 '14 at 13:54

jlahd

6,257
1
15
21

It seems like when using it, it scopes it away too far as if i add the setTimeout the inner function fails to do its task, and if removed it works – John Jul 09 '14 at 13:57
@John Use `index` instead of `i` inside the anonymous function: `setTimeout(function() { ajaxFuncHere(index); }, 300*(index+1));`. – freakish Jul 09 '14 at 13:58
@freakish indeed, thanks for the correction. Edited now. – jlahd Jul 09 '14 at 13:59

score 0 · Answer 2 · answered Jul 09 '14 at 14:00

The simple answer is to use a multiplication :

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

    (function(index) {

      setTimeout(function () {
       ajaxFuncHere(index);
      }, 300 * 1);       //Will delay the script   

        //now you can also loop an ajax call here without problems: $.ajax({});
    })(i);

}

The best solution is to use the ajax done callback with a self-calling function. Since i dont know how your ajaxFuncHerelook like, ill asume something like this :

function ajaxFuncHere(){
    $.ajax(...);
}

Change it for that :

function ajaxFuncHere(){
    return $.ajax(...);
}

then Use something like that :

//Remove the for
(function loop(number, current) {

    if(current === undefined) current = 0;

    if(current < number) setTimeout(function () {
        ajaxFuncHere(current).done(loop.bind(null, number, ++current));
    }, 300);          
})(5); //5 == number of iteration

Once the ajax is done, it will recall the function and wait 300 ms.

It works the first iteration, and then it says Uncaught TypeError: Cannot read property 'done' of undefined — John, Jul 09 '14 at 14:09
@John place the keyword `return` before `$.getJSON` : `return $.getJSON()`. — Karl-André Gagnon, Jul 09 '14 at 14:17

score 0 · Answer 3 · edited May 23 '17 at 10:32

You can replace the for-loop with a tail-recursive function which timeouts at the end of it's execution and calls itself again:

var i = 0;
var max = 5;
var doLoop = function()
{
    if(i < max)
    {
        ajaxFuncHere(i);
        i++;
        setTimeout(doLoop, 1000);
    }
};
doLoop();

function ajaxFuncHere(x)
{
    // Do what you want to do.
    // Look at the demo for an example.
}

Here's a demo. Just replace your ajaxFuncHere with mine and it should work just fine.

Each iteration, delay the execution

3 Answers3