uTools-Manuals/docs/jQuery/deferred.then.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">deferred.then()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/deferred-object/">延迟对象</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/deferred.then/" target="_blank">deferred.then()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="deferred-then1"><h2 class="section-title">
<span class="name">deferred.then( doneFilter [, failFilter ] [, progressFilter ] )</span><span class="returns">返回: <a href="/Types/#Promise">Promise</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>
			  当Deferred（延迟）对象解决，拒绝或仍在进行中时，调用添加处理程序。 </p>
<ul class="signatures">
<li class="signature" id="deferred-then-doneFilter-failFilter-progressFilter">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.8/">1.8</a></span>deferred.then( doneFilter [, failFilter ] [, progressFilter ] )</h4>
<ul>
<li>
<div><strong>doneFilter</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象得到解决时被调用的一个函数。
			      </div>
</li>
<li>
<div><strong>failFilter</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			       [可选]当Deferred（延迟）对象拒绝时被调用的一个函数。
			      </div>
</li>
<li>
<div><strong>progressFilter</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        [可选]当Deferred（延迟）对象生成进度通知时被调用的一个函数。
			      </div>
</li>
</ul>
</li>
<li class="signature" id="deferred-then-doneCallbacks-failCallbacks">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a>, removed: <a href="/category/version/1.8/">1.8</a></span>deferred.then( doneCallbacks, failCallbacks )</h4>
<ul>
<li>
<div><strong>doneCallbacks</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象得到解决时被调用的一个函数或函数数组。
			      </div>
</li>
<li>
<div><strong>failCallbacks</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象拒绝时被调用的一个函数或函数数组。
			      </div>
</li>
</ul>
</li>
<li class="signature" id="deferred-then-doneCallbacks-failCallbacks-progressCallbacks">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a>, removed: <a href="/category/version/1.8/">1.8</a></span>deferred.then( doneCallbacks, failCallbacks [, progressCallbacks ] )</h4>
<ul>
<li>
<div><strong>doneCallbacks</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象得到解决时被调用的一个函数或函数数组。
			      </div>
</li>
<li>
<div><strong>failCallbacks</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象拒绝时被调用的一个函数或函数数组。
			      </div>
</li>
<li>
<div><strong>progressCallbacks</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
			        当Deferred（延迟）对象生成进度通知时被调用的一个函数或函数数组。
			      </div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p><strong>在jQuery 1.8之前</strong>,参数可以是一个函数或函数数组。</p>
<p>
			      对于上面所有的特征，如果没有这种类型的回调是需要的，参数可以为<code>null</code>。或者，使用<code>.done()</code>，<code>.fail()</code>或者 <code>.progress()</code>设置只有一种未经过滤的状态或值的回调类型。</p>
<p><strong>从jQuery 1.8开始</strong>, 方法返回一个新的promise（承诺），通过一个函数，可以过滤deferred（延迟）的状态和值。替换现在过时的<code>deferred.pipe()</code>方法。
			      <code>doneFilter</code> 和 <code>failFilter</code>函数过滤原deferred（延迟）的解决/拒绝的状态和值。
			      <code>progressFilter</code> 函数过滤器的任何调用到原有的deferred（延迟）的<code>notify</code> 和 <code>notifyWith</code>的方法。
			
			      这些过滤器函数可以返回一个新的值传递给的 promise（承诺）的<code>.done()</code> 或 <code>.fail()</code> 回调，或他们可以返回另一个观察的对象（递延，承诺等）传递给它的解决/拒绝的状态和值promise（承诺）的回调。
			如果过滤函数是空，或没有指定，promise（承诺）将得到与原来值相同解决（resolved）或拒绝（rejected）。</p>
<p>回调是依照他们添加的顺序执行的。一旦<code>deferred.then</code>返回Promise（承诺），链接其它的延迟对象，包括增加<code>.then()</code>方法。有关详细信息，请参阅文件<a href="/category/deferred-object/">Deferred object</a> 。</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">由于 jQuery.get 方法返回 jqXHR 对象，该对象继承自延迟对象，所以我们可以添加 .then 方法。</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.get(<span class="string">"test.php"</span>).then(</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">function</span>(){ alert(<span class="string">"$.get succeeded"</span>); },</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">function</span>(){ alert(<span class="string">"$.get failed!"</span>); }</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">Filter the resolve value:</span>
</h4>
<div class="syntaxhighlighter xml ">
<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>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span>&gt;</span>Filter Resolve<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> filterResolve = <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> defer = $.Deferred(),</code></div></div><div class="container"><div class="line"><code>      filtered = defer.then(<span class="keyword">function</span>( value ) {</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">return</span> value * <span class="number">2</span>;</code></div></div><div class="container"><div class="line"><code>      });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  defer.resolve( <span class="number">5</span> );</code></div></div><div class="container"><div class="line"><code>  filtered.done(<span class="keyword">function</span>( value ) {</code></div></div><div class="container"><div class="line"><code>    $( <span class="string">"p"</span> ).html( <span class="string">"Value is ( 2*5 = ) 10: "</span> + value );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"button"</span> ).on( <span class="string">"click"</span>, filterResolve );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"><iframe height="250" width="100%"></iframe></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">Filter reject value:</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>
<div class="line n9">9</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> defer = $.Deferred(),</code></div></div><div class="container"><div class="line"><code>    filtered = defer.then( <span class="literal">null</span>, <span class="keyword">function</span>( value ) {</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">return</span> value * <span class="number">3</span>;</code></div></div><div class="container"><div class="line"><code>    });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>defer.reject( <span class="number">6</span> );</code></div></div><div class="container"><div class="line"><code>filtered.fail(<span class="keyword">function</span>( value ) {</code></div></div><div class="container"><div class="line"><code>  alert( <span class="string">"Value is ( 3*6 = ) 18: "</span> + value );</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-3">
<h4>Example: <span class="desc">Chain tasks:</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>
<div class="line n9">9</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> request = $.ajax( url, { dataType: <span class="string">"json"</span> } ),</code></div></div><div class="container"><div class="line"><code>    chained = request.then(<span class="keyword">function</span>( data ) {</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">return</span> $.ajax( url2, { data: { user: data.userId } } );</code></div></div><div class="container"><div class="line"><code>    });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>chained.done(<span class="keyword">function</span>( data ) {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// data retrieved from url2 as provided by the first request</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></section>
</div></article> </div>
</article>