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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现的分页插件完整示例
May 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中的extract的作用分析
2008/04/09 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
利用js对象弹出一个层
2008/03/26 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
请介绍一下Ant
2016/07/22 面试题
日语专业个人求职信范文
2014/02/02 职场文书
全神贯注教学反思
2014/02/03 职场文书
应届生求职信
2014/05/31 职场文书
工程项目经理任命书
2014/06/05 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
《小摄影师》教学反思
2016/02/18 职场文书