Synchronize asynchronous calls. WaitSync

Task

Suppose you want to execute two or more AJAX requests to the server and call the function after all of them have been completed.

A small snag is that you do not know which of these requests will be completed first and you don’t know on whom to hang the callback.

You can create a global variable and, at the end of each request, check to see if another request has completed.
')
Actually, this is what my small class, WaitSync, is doing =)

WaitSync.js

Using elementary is simple:

1. Create an object of type WaitSync , passing a function to the callback constructor that will be called after the necessary tasks have been completed .

var vulture = new WaitSync(function () { console.debug('Start eating: ', arguments); }); 

2. Instead of simple

  $.getJSON( 'savannah/get_prey', function (data) { console.log('... prey found: ' + data); } ); $.getJSON( 'savannah/get_other_predators', function () { console.log('... predators are done eating'); } ); 

“Wrapping” tasks into the .wrap method

  $.getJSON( 'savannah/get_prey', vulture.wrap( function (data) { console.log('... prey found: ' + data); } ) ); $.getJSON( 'savannah/get_other_predators', vulture.wrap( function () { console.log('... predators are done eating'); } ) ); 

3. All =) As soon as both AJAX requests are completed, the vulture starts eating.

How it works?

When you create a WaitSync object, you pass in an argument to the constructor.
that callback.

When you call a .wrap method and pass a function to it, it creates another function from it that does the counting and verification of calls. As a second argument, you can also pass a context (a link to an object that can be accessed through this ). If you really need it ...

That is, in fact, the class does for you what you would do with your own hands once or twice, and then decide to write something similar :)

Named / Grouped Tasks

Suppose you are making ajax requests and in addition want to handle errors:

 var monkeyBusiness = new WaitSync(function () {}); $.ajax({ url: '/cgi-bin/palm-tree', success: function (data) { console.log(' eat bananas :) '); }, error: function (data) { console.log(' eat banana peels :( '); } }); $.ajax({ url: '/cgi-bin/monkey-party', success: function (data) { console.log(' dance :) '); }, error: function (data) { console.log(' make political party :( '); } }); 

Either success or error will always be executed. In the event of any of them you need to stop waiting for the second.

To do this, simply create an identifier for the task (string or numeric) and pass it by the first parameter .wrap

 var monkeyBusiness = new WaitSync(function () { console.log('Yay! :(|) End of the day'); }); $.ajax({ url: '/cgi-bin/palm-tree', success: monkeyBusiness.wrap( 'palmTree', function (data) { console.log(' eat bananas :) '); return "banana success"; } ), error: monkeyBusiness.wrap( 'palmTree', function (data) { console.log(' eat banana peels :( '); return "banana failure"; } ) }); $.ajax({ url: '/cgi-bin/monkey-party', success: monkeyBusiness.wrap( 'monkeyParty', function (data) { console.log(' dance :) '); return "success"; } ), error: monkeyBusiness.wrap( 'monkeyParty', function (data) { console.log(' make political party :( '); return "error"; } ) }); 

Now the callback will be executed as soon as the monkey gets off the palm, while others finish the party.

Bonus!

In fact, WaitSync collects some more information.

An object containing some useful information is sent to the callback:

 var monkeyBusiness = new WaitSync( function (result) { console.log('Tasks were complete in the following order: ' + result.order.join(', ')); console.log('Palm tree: ' + result.data['palmTree']); console.log('Monkey party: ' + result.data['monkeyParty']); } ); 

The order subarray stores the order in which the tasks were performed.

The groupOrder subarray stores the order of only named tasks / groups.

In the data subarray, values ​​are stored that returned all the named tasks.

Conclusion

I think such a thing is rarely needed. In node.js it could be useful ...

In general, here =) Use for health!

github.com/TEHEK/waitsync

PS: while writing a post, I rewrote API XD twice

PPS: after I published it, I noticed a topic on the same topic published earlier ... Thanks to The Shock, for the opinion left and the highlight))