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?
jQuery is a very powerful framework of JavaScript. With jQuery, we can use do chaining which means to chain together multiple methods in a single statement on a single element. We have been using a single statement at once, but now using the chaining method we can bind multiple methods to make the code short.
jQuery Method Chaining However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s). Tip: This way, browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action.
A typical example of this scenario is the html() method. If no parameters are passed to it, the HTML contents of the selected element is returned instead of a jQuery object.
Deferred() method in JQuery is a function which returns the utility object with methods which can register multiple callbacks to queues. It calls the callback queues, and relay the success or failure state of any synchronous or asynchronous function.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With