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.ajax向后台传递数组问题的解决方法
May 12 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 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来自动调用不同服务器上的flash
2006/10/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
深入学习python的yield和generator
2016/03/10 Python
使用python进行拆分大文件的方法
2018/12/10 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
三爱活动实施方案
2014/03/19 职场文书
终止劳动合同协议书
2014/04/14 职场文书
销售求职信范文
2014/05/26 职场文书
爱护公物主题班会
2015/08/17 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python