5

Asynchronous Loop of jQuery Deferreds (promises)

 2 years ago
source link: https://www.codesd.com/item/asynchronous-loop-of-jquery-deferreds-promises.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Asynchronous Loop of jQuery Deferreds (promises)

advertisements

I am trying to create what I think is referred to as a "Waterfall". I want to sequentially process an array of async functions (jQuery promises).

Here's a contrived example:

function doTask(taskNum){
    var dfd = $.Deferred(),
        time = Math.floor(Math.random()*3000);

    setTimeout(function(){
        console.log(taskNum);
        dfd.resolve();
    },time)

    return dfd.promise();
}

var tasks = [1,2,3];

for (var i = 0; i < tasks.length; i++){
    doTask(tasks[i]);
}

console.log("all done");

I would like it to complete the task in the order they are executed (present in the array). So, in this example I want it to do task 1 and wait for it to resolve then do task 2 wait for it to resolve, do task 3 etc and the log "all done".

Maybe this is really obvious but I've been trying to figure this out all afternoon.


I'd try using $().queue instead of $.Deferred here. Add the functions to a queue, and only call the next one when ready.

function doTask(taskNum, next){
    var time = Math.floor(Math.random()*3000);

    setTimeout(function(){
        console.log(taskNum);
        next();
    },time)
}

function createTask(taskNum){
    return function(next){
        doTask(taskNum, next);
    }
}

var tasks = [1,2,3];

for (var i = 0; i < tasks.length; i++){
    $(document).queue('tasks', createTask(tasks[i]));
}

$(document).queue('tasks', function(){
    console.log("all done");
});

$(document).dequeue('tasks');




About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK