Something similar to jQuery when / then: deferred execution with break

Question

I'm searching for a solution where I'm able to run different functions, but some of them need a timeout and all following functions need to wait until the previous one is finished. Every function should be able to break the complete process.

Now I thought pushing all functions to a stack and loop through them:

function foo() {
    // bar() should wait as long the following is finished:
    setTimeout(function(){
        if ((new Date()).getSeconds() % 2) {
            alert('foo');
            // break loop through functions (bar is not called)
        }
        else {
            // start next function (bar is called)
        }
    }, 1000);
}
function bar() {
    setTimeout(function(){
        alert('bar')
    }, 1000);
}
var functions = new Array('foo', 'bar');
for (var i = 0, length = functions.length; i < length; i++) {
    window[functions[i]]();
}

But how to include wait/break?!

Note: This should work with 2+ functions (amount of functions is changeable)

Note2: I don't want to use jQuery.

Answer 1

Note: I have updated my answer, see bottom of post.

Alright, let's take a look.

You're using the window[func]() method, so you should be able to store and use return values from each function.

Proof:

function a(){
    return "value";
}

var ret_val = window['a']();
alert(ret_val);

Let's create a return rule:
If function returns true, continue execution flow.
If function returns false, break execution flow.

function a(){
    //Do stuff
    return (condition);
}

for(i = 0; i < n; i++){
    var bReturn = window['function']();
    if(!bReturn) break;
}

Now let's put it into practice.

function a(){
    //Do stuff
    return ((new Date()).getSeconds() % 2); //Continue?
}

function b(){
    //Do stuff
    return true; //Continue?
}

function c(){
    //Do stuff
    return false; //Continue?
}

function d(){
    //Do stuff
    return true; //Continue?
}

var functions = new Array('a', 'b', 'c', 'd');

for (var i = 0; i < functions.length; i++ ) {
    var bReturn = window[functions[i]]();
    if(!bReturn) break;
}

Depending on when you execute the script, eg, an even or uneven time period, it will only execute function a or execute functions a b & c. In between each function, you can go about your normal business.
Of course, the conditions probably vary from each individual function in your case.

Here's a JSFiddle example where you can see it in action.

---

With some small modification, you can for instance, make it so that if function a returns false, it will skip the following function and continue on to the next, or the one after that.

Changing

for (var i = 0; i < functions.length; i++ ) {
    var bReturn = window[functions[i]]();
    if(!bReturn) break;
}

To this

for (var i = 0; i < functions.length; i++ ) {
    var bReturn = window[functions[i]]();
    if(!bReturn) i++;
}

Will make it skip one function, every time a function returns false.

You can try it out here.

---

On a side-note, if you were looking for a waiting function that "pauses" the script, you could use this piece of code.

function pausecomp(millis){
    var date = new Date();
    var curDate = null;

    do { 
        curDate = new Date(); 
    }while(curDate-date < millis);
} 

---

Update

After adjusting the code, it now works with setTimeout.

The idea is that you have an entry point, starting with the first function in the array, and pass along an index parameter of where you currently are in the array and then increment index with one to execute the next function.

Example | Code

function next_function(index){
    if(index >= functions.length) return false;
    setTimeout(function(){
            window[functions[index+1]](index+1);
    }, 1000);
}

function a(index){
    //Do stuff
    if(((new Date()).getSeconds() % 2)) return false; //Stop?
    next_function(index);
}

function b(index){
    //Do stuff
    if(false) return false; //Stop?
    next_function(index);
}

function c(index){
    //Do stuff
    if(true) return false; //Stop?
    next_function(index);
}

function d(index){
    //Do stuff
    if(false) return false; //Stop?
    next_function(index);
}

var functions = new Array('a', 'b', 'c', 'd');

//entry point   
window[functions[0]](0);

Answer 2

This is exactly the scenario promises solve. In particular, the fact that promises can be broken is perfect for your situation, since a broken promise prevents the chain from continuing (just like a thrown exception in synchronous code).

Example, using the Q promise library discussed in the above-linked slides:

function fooAsync() {
    return Q.delay(1000).then(function () {
        if ((new Date()).getSeconds() % 2) {
            alert("foo");
            throw new Error("Can't go further!");
        }
    });
}

function barAsync() {
    return Q.delay(1000).then(function () {
        alert("bar");
    });
}

var functions = [fooAsync, barAsync];

// This code can be more elegant using Array.prototype.reduce, but whatever.
var promiseForAll = Q.resolve();
for (var i = 0; i < functions.length; ++i) {
    promiseForAll = promiseForAll.then(functions[i]);
}
// Of course in this case it simplifies to just
//     promiseForAll = fooAsync().then(barAsync);

promiseForAll.then(
    function () {
        alert("done!");
    },
    function (error) {
        alert("someone quit early!");
        // and if you care to figure out what they said, inspect error.
    }
).end();