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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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写的求多项式导数的函数代码
2012/07/04 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
优秀求职信范文分享
2013/12/19 职场文书
司机检讨书
2014/02/13 职场文书
小学生演讲稿大全
2014/04/25 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
教你用python实现12306余票查询
2021/06/30 Python
MySQL 字符集 character
2022/05/04 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python