jquery deferred done then区别

deferred是jquery 对promise的实现。

以下内容基于jquery 1.8及以上版本


deferred具有then done等属性。其区别在于Deferred resolved时,

  • done返回当前的的deferred object,callback的返回值不会被传递
  • then返回一个新的deferred object,callback的返回值会被传递(参考jquery的pipe属性)给新的callback

通过以下的例子来理解下实际的运行效果。

var defer = jQuery.Deferred();

defer.done(function(a,b){
console.log("a = " + a+"b = " + b);
return a * b; }).done(function( result ) {
console.log("result = " + result); }).then(function( a, b ) {
console.log("a = " + a+"b = " + b);
return a * b; }).done(function( result ) {
console.log("result = " + result); }).then(function( a, b ) {
console.log("a = " + a+"b = " + b);
return a * b; }).done(function( result ) {
console.log("result = " + result);
}); defer.resolve( 2, 3 );

我任意找一个jsfiddle程序
https://jsfiddle.net/founddrama/VxjZG/

将上面的测试代码贴进js代码框中运行。

输出结果是

a = 2b = 3 (index):54
result = 2 (index):58
a = 2b = 3 (index):60
result = 6 (index):63
a = 6b = undefined (index):65
result = NaN

原理解释

  1. 第一个done和第二个done都返回了defer.resolve( 2, 3 )
  2. done中callback的返回值不会被传递
  3. 第二个done只有一个参数,接收了defer.resolve( 2, 3 )的第一个参数2,所以result是2
  4. 第一个then接收defer.resolve( 2, 3 ),接收两个参数,result是6,同时新建一个deferred object,传递result给deferred object
  5. 第三个done接收到了这个新的deferred object和传递的result,打印结果是6,并把这个新的deferred object传递给第二个then
  6. 第二个then现在接收新的deferred object,它只有一个参数,是result,所以参数b没有定义,返回的结果是NaN,同时又新建一个deferred object
  7. 第四个done接收一个新建的deferred object,传递的参数是NaN,打印的结果自然就是NaN

参考


http://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done(这里有done的更直观的示例)

http://javascript.ruanyifeng.com/jquery/deferred.html

jquery deferred done then区别的更多相关文章

  1. javascript源代码学习之五——jQuery.deferred

    jQuery.Defered——异步队列用于管理一组回调函数(成功resolve,失败reject,消息progress),基于上一节实现的jQuery.callbacks完成. done,fail, ...

  2. jquery.Deferred promise解决异步回调

    我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越 ...

  3. 第三十四课:jQuery Deferred详解2

    上一课主要分析了jQuery1.51版本的jQuery Deferred.在jQuery1.6中,jQuery Deferred添加了两个方法,always,pipe. always用来添加回调,无论 ...

  4. 第三十三课:jQuery Deferred详解1

    之前我们讲了Mochikit Deferred,JSDeferred,现在讲jQuery Deferred.首先,我们先来讲下他们的区别: 在保存回调函数时,Mochikit Deferred(doj ...

  5. jQuery.Deferred对象

    一.前言 jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式: 1).串行调用Ajax $.ajax({ success: function() { $.ajax({ su ...

  6. jQuery deferred学习笔记

    简介 在jQuery1.5.0版本引入,为了实现Deferred对象,jQuery改写了ajax.是由jQuery.Deferred()方法创建的链式对象. $.Deferred在jQuery代码自身 ...

  7. javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式

    我们先来看一下编写AJAX编码常常遇到的几个问题: 1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套.ajax等异步操作越多,嵌套层次就会越 ...

  8. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  9. JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析

    一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var p ...

随机推荐

  1. Red5 1.0.0RC1 集成到tomcat6.0.35中运行&部署新的red5项目到tomcat中

    1.下载red5-war-1.0-RC1.zip 解压之得到 ROOT.war 文件. 2.处理tomcat. 下载apache-tomcat-6.0.35-windows-x86.zip包,解压到你 ...

  2. python(30) 获取网页返回的状态码,状态码对应问题查询

    获取访问网页返回的状态码 html = requests.get(Url) respon = html.status_code 以下内容来自于维基百科:点击查看网页 1xx消息 这一类型的状态码,代表 ...

  3. python glob标准库基础学习

    #glob文件名模式匹配#作用:使用unix shell规则查找与一个模式匹配文件名"""尽管glob api很小,但这个模块很强大,只要程序需要查找文件系统中名字与某种 ...

  4. svo的一些博客解析

    记录一边学习 白巧克力: svo代码笔记 http://blog.csdn.net/heyijia0327/article/details/51083398 卢彦斌:svo原理解析 东北大学孙志明:s ...

  5. cocos2d-x中文显示:加字库

    1.如下:为了中文显示 2.如下:解决方案-加入中文字库

  6. DevOps之域名

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. 域名系统DNS(Domain Name System) 关于域名,知识与技能的层次(知道.理解.运用) ...

  7. MySQL数据库基础

    MySQL数据库基础 本文的所有操作是基于CMD环境,MySQL通过在命令行中输入SQL语句对数据库进行操作.配置问题可参考<打通MySQL的操作权限>中的内容,该文算是针对前期的环境配置 ...

  8. Kali Linux Live USB初始化+使用日记

    1.Live USB制作官方guide:Making a Kali Bootable USB Drive:https://docs.kali.org/downloading/kali-linux-li ...

  9. 死链接检查工具:Xenu 使用教程

    一.软件作用 Xenu 全称Xenu’s Link Sleuth,是一款英文软件,界面单一,功能简单,使用方法很容易掌握.虽然看起来简单,但Xenu却拥有强大的功能.Xenu可以对网站的内链进行详细的 ...

  10. 为Arch Linux更换Archlinuxcn源(清华源)

    上一篇随笔 archlinux切换官方中国源 里面写了如何切换到官方的中国源,但是因为那个源有一些软件并没有,特别是一些国人常用的中文软件,比如搜狗输入法等这些都是没有的.所以我们现在需要手动切换源一 ...