Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 284
Lucas Sampaio Avatar asked Jun 20 '13 14:06

Lucas Sampaio


People also ask

What is true about jQuery method chaining?

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.

What is the method chaining in jQuery and what are the advantages?

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.

Which of the following is an example of chaining in jQuery?

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.

What is deferred jQuery?

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.


1 Answers

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.

like image 198
Kevin B Avatar answered Oct 05 '22 13:10

Kevin B