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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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性能测试工具xhprof的详解
2013/06/03 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php数组使用规则分析
2015/02/27 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
python正则分组的应用
2013/11/10 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
spyder常用快捷键(分享)
2017/07/19 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python绘制中国大陆人口热力图
2018/11/07 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
公司年会主持词
2014/03/22 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2016教师节问候语
2015/11/10 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫