在jQuery1.5中使用deferred对象

Deferred是jQuery1.5新增的一个特性，很多人把它翻译成 “异步队列”，我觉得比较靠谱，毕竟和“延迟”没啥关系，不过这篇文章中我还采用deferred这个单词。 这篇文章在jQuery1.5发布博客中提到，也是目前介绍deferred比较经典和深入的文章。鉴于目前中文资料比较少，特别翻译出来供大家学习参考。

站在用户的角度思考问题，与客户深入沟通，找到铁锋网站设计与铁锋网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖铁锋地区。

jQuery1.5中新增的Deferreds对象，可以将任务完成的处理方式与任务本身解耦合。这在JavaScript社区没什么新意，因为Mochikit和Dojo两个JS框架已经实现了这个特性很长一段时间了。但是随着Julian Aubourg对jQuery1.5中AJAX模块的重写，deferreds理所当然成为了内部的实现逻辑。使用deferreds对象，多个回调函数可以被绑定在任务完成时执行，甚至可以在任务完成后绑定这些回调函数。这些任务可以是异步的，也可以是同步的。

更重要的是，deferreds已经作为$.ajax()的内部实现，所以你可以在调用AJAX时自动获取deferreds带来的遍历。比如我们可以这样绑定回调函数：

 
 
 
    
  
  
  
  1. // $.get, 异步的AJAX请求 
    2. 
  
  
  
  2. var req = $.get('foo.htm').success(function (response) { 
    3. 
  
  
  
  3.     // AJAX成功后的处理函数 
    4. 
  
  
  
  4. }).error(function () { 
    5. 
  
  
  
  5.     // AJAX失败后处理函数 
    6. 
  
  
  
  6. }); 
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8. // 这个函数有可能在AJAX结束前调用 
    9. 
  
  
  
  9. doSomethingAwesome(); 
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11. // 添加另外一个AJAX回调函数，此时AJAX或许已经结束，或许还没有结束 
    12. 
  
  
  
  12. // 由于$.ajax内置了deferred的支持，所以我们可以这样写 
    13. 
  
  
  
  13. req.success(function (response) { 
    14. 
  
  
  
  14.     // 这个函数会在AJAX结束后被调用，或者立即被调用如果AJAX已经结束 
    15. 
  
  
  
  15. });
    16.

我们不再被限制到只有一个成功，失败或者完成的回调函数了。相反这些随时被添加的回调函数被放置在一个先进先出的队列中。

从上面例子看出，回调函数可以被附加到AJAX请求中(任何可观察的任务observable task)，甚至在AJAX请求已经结束。对于代码的组织是很好的，我们再也不用写很长的回调函数了。这就像$.queue()遇到了pub/sub(发布订阅机制，一般用在基于事件处理的模型中).

更深入一些，想象这样一个场景，在一些并发的AJAX请求全部结束之后执行一个回调函数。我可以方便的通过jQuery的函数$.when()来完成：

 
 
 
    
  
  
  
  1. function doAjax() { 
    2. 
  
  
  
  2.     return $.get('foo.htm'); 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5. function doMoreAjax() { 
    6. 
  
  
  
  6.     return $.get('bar.htm'); 
    7. 
  
  
  
  7. } 
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9. $.when(doAjax(), doMoreAjax()).then(function () { 
    10. 
  
  
  
  10.     console.log('I fire once BOTH ajax requests have completed!'); 
    11. 
  
  
  
  11. }).fail(function () { 
    12. 
  
  
  
  12.     console.log('I fire if one or more requests failed.'); 
    13. 
  
  
  
  13. });
    14.

在jsFiddle中打开示例http://jsfiddle.net/ehynds/Mrqf8/

上面的示例能够正常运行，这要归功于每个jQuery的AJAX方法返回值都包含一个promise函数，用来跟踪异步请求。Promise函数的返回值是deferred对象的一个只读视图。(The promise is a read-only view into the result of the task.)Deferreds通过检测对象中是否存在promise()函数来判断当前对象是否可观察。$.when()会等待所有的AJAX请求结束，然后调用通过 .then(), .fail()注册的回调函数(具体调用哪些回调函数取决于任务的结束状态)。这些回调函数会按照他们的注册顺序执行。

更好的是，$.when()接受函数或者函数的数组为参数(译者注：这点不大对，$.when接受一个或多个deferred对象，或者原生的JS对象。注意不能以函数数组为参数)，这样你就可以随意组合这些异步任务。

$.ajax()返回一个对象，这个对象关联一些deferred函数，比如promise(), then(), success(), error()。然而你不能操作原始的deferred对象，只有promise()函数(译者注：还记得刚才提到的promise是只读视图)，以及可以检测deferred状态的isRejected() 以及isResolved()函数。

但是为什么不返回deferred对象呢?如果返回了完整的deferred对象，那么我们就拥有更多的控制，或许可以随意的触发(译者注：我把resolve翻译成触发，就是触发所有注册到deferred对象上的回调函数)deferred对象，从而导致所有回调函数在AJAX请求结束之前执行。因此，为了避免不期望的触发deferred的风险，我们应该只返回dfd.promise().(Therefore, to avoid potentially breaking the whole paradigm, only return the dfd.promise().)(译者注：如果你很迷惑上面几段话的确切意思，没关系，我随后会写一篇文章深层次分析其中原因:http:/cnblogs.com/sanshi/)

注册回调函数(Registering Callbacks)

上面的例子中，我们使用then(), success(), fail()方法来注册回调函数，其实还有更多的方法可以使用，特别在处理AJAX请求时。具体使用哪种方式取决于你对结果状态的关注。

所有deferred对象都有的函数 (AJAX, $.when 或者手工创建的deferred对象):

 
 
 
    
  
  
  
  1. .then( doneCallbacks, failedCallbacks ) 
    2. 
  
  
  
  2. .done( doneCallbacks ) 
    3. 
  
  
  
  3. .fail( failCallbacks )
    4.

AJAX对象包含3个额外的方法，其中两个会映射到上面提到的方法。这些方法主要是为了兼容以前的代码：

 
 
 
    
  
  
  
  1. // "success" 和 "error" 会分别映射到 "done" and "fail" 两个方法 
    2. 
  
  
  
  2. .success( doneCallbacks ) 
    3. 
  
  
  
  3. .error( failCallbacks )
    4.

你也可以注册一个complete的回调函数，它会在请求结束后调用，而不管这个请求是成功或者失败。不像success或者error函数，complete函数其实是一个单独的deferred对象的done函数别名。这个在$.ajax()内部创建的deferred对象，会在AJAX结束后触发回调函数(resolve)。

 
 
 
    
  
  
  
  1. .complete( completeCallbacks )
    2.

因此，下面的3个例子是等价的(在AJAX的上下文中，success看起来比done函数会舒服点，对么?)(译者注：其实是因为我们熟悉以前的AJAX调用方式，先入为主罢了，或者叫思维定势)：

 
 
 
    
  
  
  
  1. $.get("/foo/").done( fn ); 
    2. 
  
  
  
  2. // 等价于： 
    3. 
  
  
  
  3. $.get("/foo/").success( fn ); 
    4. 
  
  
  
  4. // 等价于： 
    5. 
  
  
  
  5. $.get("/foo/", fn );
    6.

创建自己的deferred对象(Creating your own Deferred)

我们知道$.ajax和$.when在内部实现了deferred接口，不过我们也可以手工创建deferred对象：

 
 
 
    
  
  
  
  1. function getData() { 
    2. 
  
  
  
  2.     return $.get('/foo/'); 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5. function showDiv() { 
    6. 
  
  
  
  6.     var dfd = $.Deferred(); 
    7. 
  
  
  
  7.     $('#foo').fadeIn(1000, dfd.resolve); 
    8. 
  
  
  
  8.     return dfd.promise(); 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11. $.when(getData(), showDiv()).then(function (ajaxResult) { 
    12. 
  
  
  
  12.     console.log('The animation AND the AJAX request are both done!'); 
    13. 
  
  
  
  13.     // 'ajaxResult'是服务器端返回（译者注：也就是getData中AJAX的结果） 
    14. 
  
  
  
  14. });
    15.

在jsFiddle中打开示例http://jsfiddle.net/ehynds/JSw5y/

在showDiv()中，我们创建了一个deferred对象，执行了一段动画，然后返回promise。这个deferred对象会在fadeIn()结束后被触发(resolved)。在这个promise返回和deferred对象(注意：这里的deferred指的是$.when创建的对象，而非showDiv()返回的对象)触发的中间，一个then()回调函数会被注册。这个回调函数会在两个异步的任务全部结束后执行。

getData()返回一个对象(译者注：其实是jQuery封装的XMLHttpRequest对象)拥有promise方法，这就允许$.when()监视本次AJAX请求的结束。The manually steps we took to return a promise in showDiv() is handled for us internally by $.ajax() and $.when().

1/15/2011: Julian在评论中指出，上面的语法可以被简化为$.Deferred(fn).promise()。因此下面的两端代码是等价的：

 
 
 
    
  
  
  
  1. function showDiv() { 
    2. 
  
  
  
  2.     var dfd = $.Deferred(); 
    3. 
  
  
  
  3.     $('#foo').fadeIn(1000, dfd.resolve); 
    4. 
  
  
  
  4.     return dfd.promise(); 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. // 等价于： 
    7. 
  
  
  
  7. function showDiv() { 
    8. 
  
  
  
  8.     return $.Deferred(function (dfd) { 
    9. 
  
  
  
  9.         $('#foo').fadeIn(1000, dfd.resolve); 
    10. 
  
  
  
  10.     }).promise(); 
    11. 
  
  
  
  11. }
    12.

为自定义的deferred对象添加回调函数(Defer your Deferreds)

我们可以更进一步，为getData()和showDiv()分别注册回调函数，如同我们在$.then()中注册回调函数一样。(译者注：下面的段落内容重复，说的都是一个意思，就不翻译了，看代码吧)

 
 
 
    
  
  
  
  1. function getData() { 
    2. 
  
  
  
  2.     return $.get('/foo/').success(function () { 
    3. 
  
  
  
  3.         console.log('Fires after the AJAX request succeeds'); 
    4. 
  
  
  
  4.     }); 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7. function showDiv() { 
    8. 
  
  
  
  8.     return $.Deferred(function (dfd) { 
    9. 
  
  
  
  9.         // 译者注：这段代码是原文没有的，但是在jsFiddle中出现。 
    10. 
  
  
  
  10.         // 我觉得这是作者的原意，为自定义的deferred函数注册回调函数 
    11. 
  
  
  
  11.         dfd.done(function () { 
    12. 
  
  
  
  12.             console.log('Fires after the animation succeeds'); 
    13. 
  
  
  
  13.         }); 
    14. 
  
  
  
  14.         $('#foo').fadeIn(1000, dfd.resolve); 
    15. 
  
  
  
  15.     }).promise(); 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17.   
    18. 
  
  
  
  18. $.when(getData(), showDiv()).then(function (ajaxResult) { 
    19. 
  
  
  
  19.     console.log('Fires after BOTH showDiv() AND the AJAX request succeed!'); 
    20. 
  
  
  
  20.     // 'ajaxResult'是服务器返回结果 
    21. 
  
  
  
  21. });
    22.

在jsFiddle中打开示例http://jsfiddle.net/ehynds/W3cQc/

链式代码(Chaining Hotness)

Deferred的回调函数可以链式调用，只要函数返回的是deferred对象(译者注：dfd.promise()返回的是只读的deferred对象)。这是一个实际的代码 (via @ajpiano!)

 
 
 
    
  
  
  
  1. function saveContact(row) { 
    2. 
  
  
  
  2.     var form = $.tmpl(templates["contact-form"]), 
    3. 
  
  
  
  3.         valid = true, 
    4. 
  
  
  
  4.         messages = [], 
    5. 
  
  
  
  5.         dfd = $.Deferred(); 
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7. /* 
    8. 
  
  
  
  8.  *   这里方式客户端验证代码 
    9. 
  
  
  
  9.  */
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.     if (!valid) { 
    12. 
  
  
  
  12.         dfd.resolve({ 
    13. 
  
  
  
  13.             success: false, 
    14. 
  
  
  
  14.             errors: messages 
    15. 
  
  
  
  15.         }); 
    16. 
  
  
  
  16.     } else { 
    17. 
  
  
  
  17.         form.ajaxSubmit({ 
    18. 
  
  
  
  18.             dataType: "json", 
    19. 
  
  
  
  19.             success: dfd.resolve, 
    20. 
  
  
  
  20.             error: dfd.reject 
    21. 
  
  
  
  21.         }); 
    22. 
  
  
  
  22.     } 
    23. 
  
  
  
  23.   
    24. 
  
  
  
  24.     return dfd.promise(); 
    25. 
  
  
  
  25. }; 
    26. 
  
  
  
  26.   
    27. 
  
  
  
  27. saveContact(row).then(function (response) { 
    28. 
  
  
  
  28.     if (response.success) { 
    29. 
  
  
  
  29.         // 客户端验证通过，并且保存数据成功 
    30. 
  
  
  
  30.     } else { 
    31. 
  
  
  
  31.         // 客户端验证失败 
    32. 
  
  
  
  32.         // 输出错误信息 
    33. 
  
  
  
  33.     } 
    34. 
  
  
  
  34. }).fail(function (err) { 
    35. 
  
  
  
  35.     // AJAX请求失败 
    36. 
  
  
  
  36. });
    37.

saveContact()函数首先验证表单数据的有效性，然后把有效性状态保存在变量valid中。如果验证失败，直接deferred会被触发(把一个包含success状态码和错误信息的JS对象作为参数传递给回调函数)。如果验证通过，则向服务器提交数据，在AJAX成功完成后触发deferred对象。fail()会处理404， 500等可以阻止AJAX请求成功完成的HTTP状态码。

不可观察的任务(Non-observable Tasks)

Deferreds对于解耦任务与任务处理函数时非常有用，而不管是异步任务或者同步任务。一个任务可能会返回promise，但也可以返回字符串，对象或者其他类型。

在这个例子中，当“Lanch Application”链接被***点击时，一个AJAX请求会发送到服务器并返回当前时间戳。然后这个时间戳会被保存到这个链接的data缓存中。当这个链接再次被点击时，只是简单的从缓存中取出这个时间戳返回，而不会发出AJAX请求。

 
 
 
    
  
  
  
  1. function startTask(element) { 
    2. 
  
  
  
  2.     var timestamp = $.data(element, 'timestamp'); 
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.     if (timestamp) { 
    5. 
  
  
  
  5.         return timestamp; 
    6. 
  
  
  
  6.     } else { 
    7. 
  
  
  
  7.         return $.get('/start-task/').success(function (timestamp) { 
    8. 
  
  
  
  8.             $.data(element, 'timestamp', timestamp); 
    9. 
  
  
  
  9.         }); 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11. } 
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13. $('#launchApplication').bind('click', function (event) { 
    14. 
  
  
  
  14.     event.preventDefault(); 
    15. 
  
  
  
  15.   
    16. 
  
  
  
  16.     $.when(startTask(this)).done(function (timestamp) { 
    17. 
  
  
  
  17.         $('#status').html('
    You first started this task on: ' + timestamp + '
    '); 
    18. 
  
  
  
  18.     }); 
    19. 
  
  
  
  19.   
    20. 
  
  
  
  20.     loadApplication(); 
    21. 
  
  
  
  21. });
    22.

当$.when()发现它的***个参数没有promise函数(因此不可观察)，它就会创建一个新的deferred对象，触发deferred对象，并返回promise只读对象。因此，任意不可观察的任务也能传递到$.when()中。

需要注意的一个问题是，如果一个对象自身拥有promise函数，则这个对象将不能作为deferred对象。jQuery判断一个对象是否deferred，是通过查看它是否有promise函数来决定的，但是jQuery并不会检查这个promise是否真的返回一个可用的对象。因此下面的代码将会出错：

 
 
 
    
  
  
  
  1. var obj = { 
    2. 
  
  
  
  2.     promise: function () { 
    3. 
  
  
  
  3.         // do something 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5. }; 
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7. $.when(obj).then(fn);
    8.

结论(Conclusion)

Deferreds提出了一种新的健壮的方式来处理异步任务。和传统的将代码组织到一个回调函数中不同，新的deferred对象允许我们在任何时候(甚至在任务结束后)绑定多个回调函数，而这些回调函数会以先进先出的方式被调用。这篇文章中的信息可能比较难以消化，不过一旦你掌握了deferred对象的使用，你会发现组织异步执行的代码将会非常容易。

当前名称：在jQuery1.5中使用deferred对象
网站网址：http://www.hantingmc.com/qtweb/news44/14044.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站设计知识

分类信息网站

定制网站设计　　 　画册设计制作　　 　app软件开发　　 　LED亮化工程　　 　微信小程序　　 　雪茄烟　　 　艾名斯线缆　　 　品牌官网设计　　 　培训网站方案　　 　成都网络推广　　 　绵竹网站建设　　 　成都移动机房　　 　成都多线机房　　 　网站运营　　 　整合营销　　 　wap网站建设　　 　移动机房服务器托管　　 　响应式建站　　 　小程序开发　　 　眉山网站建设