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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
非常不错的一个javascript 类
2006/11/07 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python re模块介绍
2014/11/30 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
公务员政审单位鉴定材料
2014/05/16 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
周一问候语大全
2015/11/10 职场文书
导游词之太原天龙山
2020/01/02 职场文书