jQuery deferred2

by zdam

HTML

<ul id="progress">
</ul>

JavaScript

// This exersices the solution to this stackoverflow question: 
// http://stackoverflow.com/questions/6647527/jquery-deferred-do-i-need-pipes-or-chains-to-achieve-this-pattern


logProgress('loaded');

main();

function main(){
    
    logProgress('in main');
    
    var data = []; // the ids coming back from serviceA

    var deferredA = callToServiceA(data); // has to add the ids to data

    deferredA.done(function() { // if callToServiceA successful...
        var deferredBs = [];
        var successFuncs = [];

        for(var i = 0; i < data.length; i++){
            deferredBs.push(callToServiceB(data[i]));
            successFuncs.push(serviceBSuccessHandler);
        }
        

        //$.when.apply($, deferredBs).then(callToServiceC);
        //$.when.apply($, deferredBs).then(successFuncs);
        $.when.apply($, deferredBs).then(serviceBSuccessHandler,serviceBSuccessHandler);
    });
}        
        
function callToServiceA(data){

        var dfd = $.Deferred();
        
        logProgress('calling service A');
        data.push(3);
        data.push(7);        
    
        setTimeout(dfd.resolve(),1000);
    
        return dfd.promise();
}

function callToServiceB(data){

        var dfd = $.Deferred();
        
        logProgress('calling service B');
    
        var key = 'data'+data;
        var value = data*10;
        logProgress('writing: '+key+','+value);
        $.data(document.body, key, value);    
    
        setTimeout(dfd.resolve(data), 2000);    
    
        return dfd.promise();
}

function serviceBSuccessHandler(data){
    logProgress('success handler running with this info: '+data);
}

function callToServiceC(){
        
        logProgress('calling service C');
        logProgress('extracting info that was created by serviceB calls');
        logProgress($.data(document.body, 'data3'));
        logProgress($.data(document.body, 'data7'));        
}

function logProgress(message){
   ...