uTools-Manuals/docs/jQuery/jQuery.when.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.when()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/core/">核心 API</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/deferred-object/">延迟对象</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.when/" target="_blank">jQuery.when()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-when1"><h2 class="section-title">
<span class="name">jQuery.when( deferreds )</span><span class="returns">返回: <a href="/Types/#Promise">Promise</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>提供一种方法来执行一个或多个对象的回调函数， <a href="/deferred-object/">Deferred(延迟)</a>对象通常表示异步事件。</p>
<ul class="signatures"><li class="signature" id="jQuery-when-deferreds">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a></span>jQuery.when( deferreds )</h4>
<ul><li>
<div><strong>deferreds</strong></div>
<div>类型: <a href="/Types/#Deferred">Deferred</a>
</div>
<div>一个或多个延迟对象，或者普通的JavaScript对象。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>
			
			      如果向 <code>jQuery.when</code> 传入一个延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)。可以继续绑定 Promise 对象的其它方法，例如， <code><a href="/deferred.then">defered.then</a></code> 。当延迟对象已经被受理（resolved）或被拒绝(rejected）（通常是由创建延迟对象的最初代码执行的），那么就会调用适当的回调函数。例如，由 <code>jQuery.ajax</code> 返回的 jqXHR 对象是一个延迟对象，可以向下面这样使用：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.when( $.ajax(<span class="string">"test.aspx"</span>) ).then(<span class="keyword">function</span>(data, textStatus, jqXHR){</code></div></div><div class="container"><div class="line"><code>     alert( jqXHR.status ); <span class="comment">// alerts 200</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果一个参数被传递给<code>jQuery.when</code> ，
			
			      那么它会被当作是一个被受理（resolved）的延迟对象，并且添加到上面的任何 doneCallbacks 都会被立刻执行。向 doneCallbacks 中传入的是原始的参数。在这种情况下，设定的任何 failCallbacks 永远都不会被执行，因为延迟对象永远不会被拒绝（rejected）。例如：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.when( { testing: <span class="number">123</span> } ).done(</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">function</span>(x) { alert(x.testing); } <span class="comment">/* alerts "123" */</span></code></div></div><div class="container"><div class="line"><code>    );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在案例中有多个延迟对象传递给<code>jQuery.when</code> ，该方法返回一个新的“宿主”延迟对象，跟踪所有已通过Deferreds聚集状态。
			当所有的延迟对象被受理（resolve）时，该方法才会受理它的 master 延迟对象。当其中有一个延迟对象被拒绝（rejected）时，该方法就会拒绝它的 master 延迟对象。如果 master 延迟对象被受理（resolved），那么会传入所有延迟对象的受理（resolved）值，这些延迟对象指的就是传给 <code>jQuery.when</code> 的参数。例如，当延迟对象是 <code>jQuery.ajax()</code>  请求，那么传入的受理（resolved）参数就是请求用的 jqXHR 对象，传入顺序就是它们在参数列表中的顺序。</p>
<p>在多延迟情况下，如果延迟一被拒绝，<code>jQuery.when</code>触发立即调用 master 延迟对象的 failCallbacks。请注意，在上述情况中，有一些延迟对象依然是不能被受理（unresolved）的。那么，在这种情况下，如果需要执行一些额外的处理，例如，取消所有未完成的 ajax 请求，你可以在闭包中进行保持 jqXHR 对象的引用，并且在 failCallback 中检查或取消它们。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">执行Ajax请求后两个函数是成功的。（见jQuery.ajax()对于一个成功的和错误的案件为AJAX请求的完整描述文档）。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.when($.ajax(<span class="string">"/page1.php"</span>), $.ajax(<span class="string">"/page2.php"</span>)).done(<span class="keyword">function</span>(a1,  a2){</code></div></div><div class="container"><div class="line"><code>  <span class="comment">/* a1 and a2 are arguments resolved for the</span></code></div></div><div class="container"><div class="line"><code>      page1 and page2 ajax requests, respectively */</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> jqXHR = a1[<span class="number">2</span>]; <span class="comment">/* arguments are [ "success", statusText, jqXHR ] */</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">if</span> ( <span class="regexp">/Whip It/</span>.test(jqXHR.responseText) ) {</code></div></div><div class="container"><div class="line"><code>    alert(<span class="string">"First page has 'Whip It' somewhere."</span>);</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">
			执行函数<code>myFunc</code>当两个Ajax请求是成功的，如果任一或<code>myFailure</code>有一个错误。
			</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.when($.ajax(<span class="string">"/page1.php"</span>), $.ajax(<span class="string">"/page2.php"</span>))</code></div></div><div class="container"><div class="line"><code>  .then(myFunc, myFailure);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>