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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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 反射机制实现动态代理的代码
2008/10/22 PHP
php 表单验证实现代码
2009/03/10 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
jQuery中的deferred使用方法
2017/03/27 jQuery
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python字符串中查找子串小技巧
2015/04/10 Python
python实现图像识别功能
2018/01/29 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python简单贪吃蛇开发
2019/01/28 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
internal修饰符起什么作用
2013/12/16 面试题
小学语文教学经验交流材料
2014/06/02 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS