Lucas Sampaio Lucas Sampaio - 1 month ago 10
jQuery Question

Chain multiple "then" in jQuery.when

I have a function that does something like this:

function do_something() {
// some code

return $.when(foo, bar, baz).then(do_something_else);
}

function do_something_else(_foo, _bar, _baz) {
// do something else

return /* the original inputs */;
}


So, when someone uses
do_something
, they can also chain more callbacks, like:

do_something().then(function(_foo_2, _bar_2, _baz_2) {
console.log(_foo_2, _bar_2, _baz_2);
});


The problem is that I don't know how to bypass the original return from
do_something_else
to the anonymous function described. I don't want to receive a list, but positional arguments instead, so "when foo" inserts some value to do_something_else's _foo and then the same value goes to _foo_2.

How can I do it in JS?

Answer

Use an anonymous function inside of .then and pass the parameters that you want to pass. I'm replacing .then with .done because you don't need .then in this case.

function do_something() {
    // some code

    return $.when(foo, bar, baz).done(function(_foo_2, _bar_2, _baz_2){
        do_something_else.apply(this,_foo_2);
    });
}

.then actually creates a new deferred object and sends that to the chain. Since you didn't return anything from .then, the new deferred object has no arguments. See this example:

$.when($.Deferred().resolve(2), $.Deferred().resolve(4))
.then(function(a,b) { 
    console.log(a,b); // 2,4
    return $.Deferred().resolve(a,b,6);
}).then(function(a,b,c) { 
    console.log(a,b,c); // 2,4,6
});

If you instead just used .done, it would work as expected.

$.when($.Deferred().resolve(2), $.Deferred().resolve(4))
.done(function(a,b) { 
    console.log(a,b);
}).done(function(a,b) { 
    console.log(a,b);
});

The most common use for .then is chaining ajax requests:

$.ajax({...}).then(function(){
    return $.ajax({...});
}).then(function(){
    return $.ajax({...});
}).then(function(){
    return $.ajax({...});
}).then(function(){
    return $.ajax({...});
});

which can also be easily done in a loop. Each .then will have access to the returned data from the previous request.