jquery deferred setTimeout loop

Question

I have an array of functions to iterate with setTimeout function to give non-blocking effects, but any or all function can have order flag, which means this is to be executed only after previous functions have been executed. Someone suggested me to use jquery.deferred. I've never used jquery deferred.

while(that.funcns.length>0){
  fn=that.funcns.splice(0,1)[0];
  fn.idx=i;
  window.setTimeout(function(){
    fn.ref(); //call function reference     
  },(idx==0)?idx:1000);
}
//fn - {ref:functionReference,order:true/false};

I've already done that, but can't find the one fit in my situation. — Avneesh Raghav, Sep 27 '12 at 18:12
What are `i`, `idx` and `ref`? Tell us about those "funcn" objects — Bergi, Sep 27 '12 at 18:12

Felix Kling · Answer 1 · 2012-09-27T18:24:06.000

0

You could use deferred objects, but why don't you just use one timer and call the functions one by one?

var funcs = [/* array of functions */];

function next() {
    var func = funcs.shift();
    if(func) {
        func();
        setTimeout(next, 100);
    }
}

next();

Things get more complicated if some functions can run "in parallel" and some are dependent, but you don't provide a lot of information about this.

But it wouldn't make much of a difference either. If you don't use webworkers, any JavaScript is run sequentially, even if you use setTimeout. Just the order of execution is not determined.

edited Sep 27 '12 at 18:24

answered Sep 27 '12 at 18:16

Felix Kling

795,719
175
1,089
1,143

yeah I know, but I got requirement from one of my client, obviously technical, who wants to get it implemented like threading in other language.. – Avneesh Raghav Sep 27 '12 at 18:20
Please see my addition. It does not really matter since JavaScript is always single threaded. You cannot run two functions at the same time (unless you use webworkers, which is a whole different story). – Felix Kling Sep 27 '12 at 18:24
@Felix Kling, what if the function contains an XHttpRequest or other browser-async call? – Ed Bayiates Sep 27 '12 at 18:27
@AresAvatar: Then deferred objects would be useful. However the OP did not mention what those functions are doing. As always: More information -> better answers ;) – Felix Kling Sep 27 '12 at 18:29
@FelixKling It is obvious, a function can do anything. Do I need to tell it? – Avneesh Raghav Sep 27 '12 at 18:31
@AvneeshRaghav: If you have a hammer... deferred objects are powerful, but they can complicate things if they are not needed. So yes, it helps if you are explicit about what those functions are doing. If you want to use deferred objects, have a look at pipe: http://api.jquery.com/deferred.pipe/. – Felix Kling Sep 27 '12 at 18:36

Ed Bayiates · Answer 2 · 2012-09-27T20:15:15.580

If I understand your question, each function you put in the list can have a flag that says, "Wait to execute me, until all previous functions have been executed". Therefore what you need to do is add a function count and code to each function you execute to decrement the count. Something like this, I put a copy in jsFiddle here:

var funcCount = 0, funcList = [];

function executeFunctions() {
    var nextFunc;

    while (funcList.length > 0) {
        // Check next in list, if we need to wait, make sure we wait
        nextFunc = funcList[0];
        if (nextFunc.needToWait) {
            if (funcCount > 0) {
                // Try again later
                setTimeout(executeFunctions, 100);
                return;
            }
        }

        // Since we are now going to execute, remove from list and execute
        funcList.splice(0, 1);
        funcCount += 1;    // nextFunc will subtract 1 on completion
        setTimeout(nextFunc, 100);
    }
}

// For async functions to call back to completion
function completionCallback() {
    funcCount -= 1;
}

To test it I have defined two functions. The first simulates async with a long timeout. The second has the wait flag set so it needs to wait for the first. Then I add them both to the list and test it:

// Example function 1 is simulated async
function example1() {
    alert("Example1");

    // Simulate async call with completion callback function, e.g. XHttpRequest
    setTimeout(completionCallback, 2000);
}    
example1.needToWait = false;     // Not flagged

// Example function is flagged as need others to complete first
function example2() {
    alert("Example2");

    funcCount -= 1;        
}
example2.needToWait = true;

// Setup function list to execute example1 then example2
funcList.push(example1);
funcList.push(example2);

// OK, test it
executeFunctions();

If you change the function2 flag to false, the alert boxes show up one after the other, right away. If you leave it as true, the second one doesn't show up until the 2 seconds have elapsed.

jquery deferred setTimeout loop

2 Answers2