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绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现简单评论功能
Aug 19 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水印技术
2007/02/14 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Vue表单实例代码
2016/09/05 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
分析Python读取文件时的路径问题
2018/02/11 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python实现文字版扫雷
2020/04/24 Python
简单了解python列表和元组的区别
2020/05/14 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
借款协议书
2014/04/12 职场文书
开会通知短信大全
2015/04/20 职场文书
经济纠纷起诉状
2015/05/20 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
python自动化测试通过日志3分钟定位bug
2021/11/20 Python