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. Spring-quartz 可传参(包括service注入)任务调度 多个任务调度

    1 JobDetail 注意:一个JobDetail中 只能触发一个方法,如果要调度多个任务 需要有多个job类! 普通任务:总调度(SchedulerFactoryBean)--> 定时调度器 ...

  2. iOS标注和适配

    很多项目一开始没有注意美术素材的规范,这在后期会引起混乱.假如有机会做一个新项目(旧项目会有自己的历史问题,一下子很难改过来),建议设计师和程序员一起坐下来.共同设立一套规范,之后共同遵守. 下面说说 ...

  3. iOS关于JSONKit解析Unicode字符内容出错,问题出在\u0000

    JSONKit虽然很强大,但是一些特殊的Unicode,比如\u0000是无法解析的. 在github上作者解释了这个问题,说这个是内容提供的错误,不符合标准的内容,所以他不认为这个是自己的错误,这个 ...

  4. java spring mvc 全注解

    本人苦逼学生一枚,马上就要毕业,面临找工作,实在是不想离开学校.在老师的教导下学习了spring mvc ,配置文件实在繁琐,因此网上百度学习了spring mvc 全注解方式完成spring的装配工 ...

  5. 探讨.NET Core数据加密和解密问题

    前言 一直困扰着我关于数据加密这一块,24号晚上用了接近3个小时去完成一项任务,本以为立马能解决,但是为了保证数据的安全性,我们开始去对数据进行加密,然后接下来3个小时专门去研究加密这一块,然而用着用 ...

  6. 树莓派安装ubuntu-server,配置镜像,安装python/mysql/samba记录

    目标: 1/在raspberrypi 3B上安装ubuntu-server 2/配置好python/mysql/samba等服务,实现爬虫稳定运行我的硬件准备: 1/raspberrypi 3B 2/ ...

  7. Android的root学习

    Android的内核就是Linux,所以Android获取root其实和Linux获取root权限是一回事儿.在Linux下获取root权限的时候就是执行sudo或者su,接下来系统会提示输入root ...

  8. bzoj4828 [Hnoi2017]大佬

    Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...

  9. eclipse code style template

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  10. express4.x的使用

    ①.安装 npm install -g  express   ②.创建应用 express [目录] 会在目录下生成 node_modules, 存放所有的项目依赖库.(每个项目管理自己的依赖,与Ma ...