Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>With a custom object</strong></p> <pre><code>function DeferredAjax(opts) { this.options=opts; this.deferred=$.Deferred(); this.country=opts.country; } DeferredAjax.prototype.invoke=function() { var self=this, data={country:self.country}; console.log("Making request for [" + self.country + "]"); return $.ajax({ type: "GET", url: "wait.php", data: data, dataType: "JSON", success: function(){ console.log("Successful request for [" + self.country + "]"); self.deferred.resolve(); } }); }; DeferredAjax.prototype.promise=function() { return this.deferred.promise(); }; var countries = ["US", "CA", "MX"], startingpoint = $.Deferred(); startingpoint.resolve(); $.each(countries, function(ix, country) { var da = new DeferredAjax({ country: country }); $.when(startingpoint ).then(function() { da.invoke(); }); startingpoint= da; }); </code></pre> <p>Fiddle <a href="http://jsfiddle.net/7kuX9/1/" rel="noreferrer">http://jsfiddle.net/7kuX9/1/</a></p> <p>To be a bit more clear, the last lines could be written</p> <pre><code>c1=new DeferredAjax( {country:"US"} ); c2=new DeferredAjax( {country:"CA"} ); c3=new DeferredAjax( {country:"MX"} ); $.when( c1 ).then( function() {c2.invoke();} ); $.when( c2 ).then( function() {c3.invoke();} ); </code></pre> <p><strong>With pipes</strong></p> <pre><code>function fireRequest(country) { return $.ajax({ type: "GET", url: "wait.php", data: {country:country}, dataType: "JSON", success: function(){ console.log("Successful request for [" + country + "]"); } }); } var countries=["US","CA","MX"], startingpoint=$.Deferred(); startingpoint.resolve(); $.each(countries,function(ix,country) { startingpoint=startingpoint.pipe( function() { console.log("Making request for [" + country + "]"); return fireRequest(country); }); }); </code></pre> <p><a href="http://jsfiddle.net/k8aUj/1/" rel="noreferrer">http://jsfiddle.net/k8aUj/1/</a></p> <p>Edit : A fiddle outputting the log in the result window <a href="http://jsfiddle.net/k8aUj/3/" rel="noreferrer">http://jsfiddle.net/k8aUj/3/</a></p> <p>Each pipe call returns a new promise, which is in turn used for the next pipe. Note that I only provided the sccess function, a similar function should be provided for failures.</p> <p>In each solution, the Ajax calls are delayed until needed by wrapping them in a function and a new promise is created for each item in the list to build the chain. </p> <p>I believe the custom object provides an easier way to manipulate the chain, but the pipes could better suit your tastes.</p> <p><strong>Note</strong> : as of jQuery 1.8, <a href="http://api.jquery.com/deferred.pipe/" rel="noreferrer"><code>deferred.pipe()</code></a> is deprecated, <a href="http://api.jquery.com/deferred.pipe/" rel="noreferrer"><code>deferred.then</code></a> replaces it.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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