jquery中done和then的区别(详解)


Posted in jQuery onDecember 19, 2017

jquery的deferred对象的done方法和then方法都能实现链式调用,但是他们的作用是有区别的,then方法中如果你传递的方法有返回值,那么他会传递给下一个链式调用的方法。而done方法与此相反,你传递的方法就算有返回值,done方法也不会把你的返回值传给下一个链式调用的方法的,

话不多说,直接上实例:

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

输出结果如下:

jquery中done和then的区别(详解)

结果分析:

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

以上这篇jquery中done和then的区别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
You might like
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Bootstrap Table使用整理(三)
2017/06/09 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
微信小程序实现日历小功能
2020/11/18 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中property属性实例解析
2018/02/10 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
美术教师自我鉴定
2014/02/12 职场文书
2014年会计工作总结
2014/11/27 职场文书
关于远足的感想
2015/08/10 职场文书
公司周年庆寄语
2019/06/21 职场文书