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 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现tab栏切换效果
Dec 22 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
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
夜不归宿检讨书
2014/02/25 职场文书
西式婚礼主持词
2014/03/13 职场文书
会计专业求职信范文
2014/03/16 职场文书
社区交通安全实施方案
2014/03/22 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
答谢词范文
2015/01/05 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
把77A收信机改造成收音机
2022/04/05 无线电