jQuery的promise与deferred对象在异步回调中的作用


Posted in Javascript onMay 03, 2016

一、前言

为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码。 jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规范进行实现,有一些API上的差异。

好,让我们来看看他们的特性吧( 本文示例基于jquery 1.8版本以上 )。

二、示例

以前写动画时,我们通常是这么干的:

$('.animateEle').animate({
 opacity:'.5'
}, 4000,function(){
 $('.animateEle2').animate({
  width:'100px'
 },2000,function(){
  // 这样太伤了
  $('.animateEle3').animate({
   height:'0'
  },2000);
 });
});

假如这么使用回调的话,那就太伤了。幸好,还有一些现成的 Promise 解决方案来优雅地解决这种问题。

我们看看 jQuery 提供的解决办法。

var animate1 = function() {
 return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
 return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
 return $('.animateEle3').animate({height:'0'},2000).promise();
};
// so easy,有木有,so clear,有木有
$.when(animate1()).then(animate2).then(animate3);

很明显,更改后的代码更易懂易读了。

但是,上面的代码,有些细节的东西并没有透露,一不小心,就容易出错,得不到我们想要的顺序完成动画的效果。下面让我们来全面理解 jQuery 提供的 promise 和 deferred 对象的方法,看看到底如何使用。

三、promise和deffered对象方法

promise 对象其实就是 deferred 对象的特例,因为 promise 对象不能更改异步状态,而 deferred 对象可以。这点在他们的方法设计上,有着明显的体现。

1.promise对象方法

通常,对于DOM,动画,ajax相关方法,我们都可以使用 promise 方法。调用 promise 方法,返回的是 promise 对象。可以链式调用 promise 方法。

promise对象常见的方法有三个 : done , fail , then 。

其它的方法就不要去记了, jquery 这里的接口方法太多了,在我看来挺??碌模?透?缙诘氖录?椒ò蠖ㄒ谎? live , delegate , bind ,最终不是都归为 on 来管了么。

代码示例,如下:

(1)DOM使用 promise 方法:

var box=$('#box');
box.promise().done(function(ele){
  console.log(ele);//jQuery box
});

(2)Ajax使用 promise 方法(默认返回一个 promise 对象,所以可以不必显式调用 promise 方法):

$.post('/',{}).done(function(data){
  console.log('请求成功');
}).fail(function(){
  console.log('请求错误');
});

动画示例已有,就不重复列出了。

2.deferred对象方法

那么Deferred和Promise之间有什么区别呢?正如你在前面看到的,一个promise就是一个由异步函数返回的对象。当你想要自己编写一个这样的函数时你需要使用一个deferred。

一个deferred对象能做的和一个promise对象差不多,但是它有两个函数来触发done()和fail()函数。

一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。

你可以给resolve()和reject()函数都提供参数,然后它们都将传递给与done()和fail()相关的回调函数。

promise对象没有resolve()和reject()函数。这是因为你将promise放到了其他的脚本中并且你也不想promise去resolve或者reject一个promise。

下面是一个关于deferred的简单例子。html仅仅是一个简单的拥有id属性为”result”的空div。

$('#result').html('waiting...');

var promise = wait();
promise.done(result);

function result() {
 $('#result').html('done');
}

function wait() {
 var deferred = $.Deferred();

 setTimeout(function() {
  deferred.resolve();
 }, 2000);

 return deferred.promise();
}

其中,wait()函数返回了一个promise。它将在2s之后被解析。除了setTimeout之外,异步函数中所有的东西都能这样使用,比如 动画,Web worker等等。wait()函数中的代码应该很清晰,我们使用了deferred对象,但是我们返回了一个限制的promise对象。

对于 deferred 对象呢,也就是使用 $.Deferred() 方法,以及 $.when() 等方法创造出来的对象,有如下的常用方法:

resolve , reject , notify ;
done , fail , progress ;

另外还有 promise 、 then 和 always 方法。

之所以这么排版,是因为他们是对应的,也就是说: resolve 方法会触发 done 的回调执行, reject 会触发 fail 的回调, notify 会触发 progress 的回调。

直接看代码:

var wait = function(ms) {
 var dtd = $.Deferred();
 setTimeout(dtd.resolve, ms);
 // setTimeout(dtd.reject, ms);
 // setTimeout(dtd.notify, ms);
 return dtd.promise(); //此处也可以直接返回dtd
};

wait(2500).done(function() {
 console.log('haha,师太,你可让老衲久等了');
}).fail(function() {
 console.log('失败了');
}).progress(function(res) {
 console.log('等待中...');
});

我们看到了,上面的代码中,在 wait 函数中,返回的是个 promise 对象,而不是 deferred 对象。

要知道, promise 对象是没有 resolve , reject , notify 等方法的,也就意味着,你无法针对 promise 对象进行状态更改,只能在 done 或 fail 中进行回调配置。所以,你如果这么调用 wait(2500).resolve() 将会报错,因为 wait(2500) 返回的是个 promise 对象,不存在 resolve 方法。

但是,这么做,有个好处,我们把 dtd 这个 deferred 对象放在了 wai t函数中,作为了局部变量,避免了全局的污染;进一步通过 promise 方法,转化 dtd 这个 deferred 对象为 promise 对象,避免了函数 wait 外部可能发生的状态更改(假如我们确实有这个需求)。

比如:

var wait = function(ms) {
 var dtd = $.Deferred();
 setTimeout(dtd.resolve, ms);
 // setTimeout(dtd.reject, ms);
 // setTimeout(dtd.notify, ms);
 return dtd; //此处也可以直接返回dtd
};

wait(2500).reject().fail(function(){
 console.log('失败了...............');
});

我们在外部更改了 wait 返回的 deferred 对象的状态,这样必然触发该对象的 fail 回调函数。

对于 always 方法,从字面意思上就很容易理解, deferred 对象无论是 resolve 还是 reject ,都会触发该方法的回调。

3.其它共性

此处讲讲 then 和 $.when 方法的使用。它们对 promise 对象也适用。

$.when 方法接受多个 deferred 对象或者纯javascript对象,返回 promise 对象。
then 方法依次接受三个回调,分别为 deferred 对象 resolve , reject , notify 后触发的回调,返回一个 promise 对象。注意,必须传入函数,而该函数只有返回一个 promise 对象,才能够让异步事件按照预期顺序来执行。
我们来看看最开始的动画示例代码, $.when(animate1()).then(animate2).then(animate3) , $.when 方法中接受了一个 animate1 的函数执行结果,也就是得到了一个 promise 对象,而后的 then 中,则只是接受了一个变量名,这样得到的结果是一个匿名的函数体,而该函数中返回的是 promise 对象。正好符合了我们对 then 接受参数的要求。

假如我们把执行语句改成: $.when(animate1()).then(animate2()).then(animate3()) ,这样造成的结果就是三个动画同步执行了。与 $.when(animate1(),animate2(),animate3()) 无异。

既然 then 是如此要求,那么与 then 方法类似的 done , fail , progress 也是一样的。

Javascript 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
javascript操作表格排序实例分析
May 06 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
JavaScript的MVVM库Vue.js入门学习笔记
May 03 #Javascript
聊一聊JavaScript作用域和作用域链
May 03 #Javascript
小白谈谈对JS原型链的理解
May 03 #Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 #Javascript
JQuery的Pager分页器实现代码
May 03 #Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 #Javascript
JQuery核心函数是什么及使用方法介绍
May 03 #Javascript
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
php代码书写习惯优化小结
2013/06/20 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php安装swoole扩展的方法
2015/03/19 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
教师学习培训邀请函
2014/02/04 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
追讨欠款律师函
2015/05/27 职场文书
未婚证明格式
2015/06/15 职场文书