jQuery promise everything

Question

Is such pattern possible in jQuery or javascript?:

$.when(function(){

    //I init many plugins here, some of them use ajax etc but I dont really control it
    //I only do something like $(div).somePlugin() here
    $("div").myPlugin()

}).done(function(){

   //and this part I want to be executed when all ajaxes and deferred stuff from when part is done
   //however I cannot go to every plugin and add something like deferred.resolve() etc.

});

and myPlugin would have for example

$.fn.myPlugin = function(){
    $(this).load(someUrl);
};

(but I cannot change myPlugin as its some external code.)

Basically I've got a lot of stuff happening and a lot of this uses async. functions. I want to execute some function when all this async. stuff is done, but I cannot change plugins code so I can't add .resolve() stuff to it.

Answer 1

Yes, this is basically what .when does!

// changes body html
var fisrtApi = $.get("http://something/foo").then(function(r){ $("body div").html(r); }); 
// inits some API for usage
var secondApi = somePromiseReturningFucntion();
// sets a plugin on top of a page    
var somePlugin = someOtherPromiseReturningFn();


$.when(firstApi,secondApi,somePlugin).done(function(r1, r2, r3){
     // all of them ready, results are the arguments
});

It is also pretty straightforward to convert a regular non promise returning API to promises.

For example, let's do $(document).ready(function(){

// returns a promise on the document being ready
function whenDocumentReady(){
    var d = $.Deferred();
    $(document).ready(function(){ d.resolve(); });
    return d.promise();
};

Which would let you do:

$.when($.get("http://yourAPI"), whenDocumentReady()).done(function(apiResult,_){
    // access API here, the document is also ready.
});

For example - with jQuery twitter, the library provides a callback for when it's done fetching data. You would promisify it:

function getTweets(username, limit){
    var d = $.Deferred();
    $.twitter(username, limit , function(res){ d.resolve(res); });
    return d.promise();
}

Which would let you do:

$.when(getTweets("someusername"),whenDocumentReady()).done(function(tweets){
       // document is ready here _and_ the twitter data is available,
       // you can access it in the `tweets` parameter
});

Answer 2

If that is what you are looking for, then yes, it is totally possible

$.when(sync(), async(), ajax()).done(function(s,a1, a2) {
   console.log( s + ' + ' + a1  + ' + ' + a2)     // outputs sync + async + ajax      
})

function sync() {
    return 'sync'   
}

function async() {
    var d = $.Deferred();

    setTimeout(function() {
        d.resolve('async')        
    }, 100)    

    return d;        
}

function ajax() {
    return $.post('http://jsfiddle.net/echo/html/', { html: 'ajax' })
}

Answer 3

I guess the only way to do it is kind of ugly.

If you cannot use deferreds and resolve method, you have no other choice than listen to changes in the dom or context (plugins usually modify the DOM or create new object in the context).

Then you will have to look for $(myElt).hasClass('<class_created_and_applied_by_my_plugin>') turning from false to true, or stuff like this.

You have to create a deferred for each plugin and wrap the previous test in a setInterval to simulate a listener, and finally resolve the deferred.

This way, you can put all your deferred into a when and be sure they are all resolved before going on.

But this is really really uggly cause you have to personalize the test for each plugin. And I guess, this will certainly slow down the browser too.