StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is a callback object I wrote where you can either set a single callback to fire once all complete or let each have their own callback and fire them all once all complete:</p> <p><em>NOTICE</em></p> <p>Since jQuery 1.5+ you can use the deferred method as described in another answer:</p> <pre><code> $.when($.ajax(), [...]).then(function(results){},[...]); </code></pre> <p><a href="http://jsfiddle.net/EN8nc/164/" rel="noreferrer">Example of deferred here</a></p> <p>for jQuery < 1.5 the following will work or if you need to have your ajax calls fired at unknown times as shown here with two buttons: <a href="http://jsfiddle.net/EN8nc/165/" rel="noreferrer">fired after both buttons are clicked</a></p> <p><strong>[usage]</strong></p> <p>for <strong>single</strong> callback once complete: <strong><a href="http://www.jsfiddle.net/subhaze/EN8nc/6/" rel="noreferrer">Working Example</a></strong></p> <pre><code>// initialize here var requestCallback = new MyRequestsCompleted({ numRequest: 3, singleCallback: function(){ alert( "I'm the callback"); } }); //usage in request $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.requestComplete(true); } }); $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.requestComplete(true); } }); $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.requestComplete(true); } }); </code></pre> <p>each having <strong>their own</strong> callback when all complete: <strong><a href="http://www.jsfiddle.net/subhaze/EN8nc/5/" rel="noreferrer">Working Example</a></strong></p> <pre><code>//initialize var requestCallback = new MyRequestsCompleted({ numRequest: 3 }); //usage in request $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.addCallbackToQueue(true, function() { alert('Im the first callback'); }); } }); $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.addCallbackToQueue(true, function() { alert('Im the second callback'); }); } }); $.ajax({ url: '/echo/html/', success: function(data) { requestCallback.addCallbackToQueue(true, function() { alert('Im the third callback'); }); } }); </code></pre> <p><strong>[The Code]</strong></p> <pre><code>var MyRequestsCompleted = (function() { var numRequestToComplete, requestsCompleted, callBacks, singleCallBack; return function(options) { if (!options) options = {}; numRequestToComplete = options.numRequest || 0; requestsCompleted = options.requestsCompleted || 0; callBacks = []; var fireCallbacks = function() { alert("we're all complete"); for (var i = 0; i < callBacks.length; i++) callBacks[i](); }; if (options.singleCallback) callBacks.push(options.singleCallback); this.addCallbackToQueue = function(isComplete, callback) { if (isComplete) requestsCompleted++; if (callback) callBacks.push(callback); if (requestsCompleted == numRequestToComplete) fireCallbacks(); }; this.requestComplete = function(isComplete) { if (isComplete) requestsCompleted++; if (requestsCompleted == numRequestToComplete) fireCallbacks(); }; this.setCallback = function(callback) { callBacks.push(callBack); }; }; })(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload