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

227 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>