Question

I want to create a JS array of 1 or many functions, each with their own parameters (provided within a closure), then invoke of all of those functions, and have a callback for when all are called.

Based on the answer for this question, I can create 1 function with the parameters needed:

var f = (function(value) {
    return function(){myFunction(value);};
}(k));

I want to have several of these functions, invoke them all, and provide a callback after all are called.

Here is a JSFiddle that attempts to do this, and does not work the way I want (it never calls my 3 functions).

This JSFiddle, using jQuery.Deferred objects (it calls my 3 functions too soon).

The way I would expect the consle.log() output to be is:

do something first
f1 done variable one
f2 done variable two
f3 done variable three
all functions have completed
callback has been called

What am I missing? How can I solve this issue?

EDIT: There will be an unknown number of functions to be called (set arbitrarily from throughout my application), which is why I am pushing them to an array.

Answer 1

Check the Deferred docs under the constructor section:

jQuery.Deferred can be passed an optional function, which is called just before the constructor returns and is passed the constructed deferred object as both the this object and as the first argument to the function.

That is, the functions run as soon as you pass them to the Deferred constructor. So, one possible way to solve the issue is to

1. make f1, f2, f3 regular functions, which accept the dfd parameter and resolve it
2. wrap them in Deferred only when you’re ready to run them.

This Fiddle produces your expected output.

var v1 = 'variable one';

// array of functions to be called
var functions = [];

function callFunctions(callback) {
    var deferreds = functions.map(function(x) {
        return $.Deferred(x);
    });
    $.when.apply(null, deferreds).done(function(){
        console.log('all functions have completed');
        if( callback && typeof(callback)==='function' ) callback();
    });
}

var f1 = (function(value) {
    return function(dfd) {
        console.log('f1 done',value);
        dfd.resolve();
    }
})(v1);

// this should be the first thing logged
console.log('do something');

functions.push(f1);

callFunctions(function() {
    console.log('callback has been called');
});​