深入解析jQuery中Deferred的deferred.promise()方法


Posted in Javascript onMay 03, 2016

deferred.promise() 和 .promise()

这两个API语法几乎一样,但是有着很大的差别。deferred.promise()是Deferred实例的一个方法,他返回一个Deferred.Promise实例。一个Deferred.Promise对象可以理解为是deferred对象的一个视图,它只包含deferred对象的一组方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个deferred的状态,而无法更改deferred对象的内在状态。这非常适合于API的封装。例如一个deferred对象的持有者可以根据自己的需要控制deferred状态的状态(resolved或者rejected),但是可以把这个deferred对象的Promise对象返回给其它的观察者,观察者只能观察状态的变化绑定相应的回调函数,但是无法更改deferred对象的内在状态,从而起到很好的隔离保护作用。

deferred.promise()

$(function(){ 
  // 
  var deferred = $.Deferred(); 
  var promise = deferred.promise(); 
   
  var doSomething = function(promise) { 
    promise.done(function(){ 
      alert('deferred resolved.'); 
    }); 
  }; 
   
  deferred.resolve(); 
  doSomething(promise); 
})

deferred.promise()也可以接受一个object参数,此时传入的object将被赋予Promise的方法,并作为结果返回。
// Existing object 
var obj = { 
 hello: function( name ) { 
  alert( "Hello " + name ); 
 } 
}, 
// Create a Deferred 
defer = $.Deferred(); 
 
// Set object as a promise 
defer.promise( obj ); 
 
// Resolve the deferred 
defer.resolve( "John" ); 
 
// Use the object as a Promise 
obj.done(function( name ) { 
 this.hello( name ); // will alert "Hello John" 
}).hello( "Karl" ); // will alert "Hello Karl"

deferred.promise() 只是阻止其他代码来改变这个 deferred 对象的状态。可以理解成,通过 deferred.promise() 方法返回的 deferred promise 对象,是没有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 这些可以改变状态的方法,你只能使用 done, then ,fail 等方法添加 handler 或者判断状态。

deferred.promise() 改变不了 deferred 对象的状态,作用也不是保证目前的状态不变,它只是保证你不能通过 deferred.promise() 返回的 deferred promise 对象改变 deferred 对象的状态。如果我们这个地方直接返回 dtd,也是可以工作的,.done 的处理函数还是会等到 dtd.resolve() 之后才会执行.

具体在那篇博客的例子, 如果我们把代码改成如下的形式:

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕!");
    dtd.resolve(); // 改变deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

这样的执行结果和先前返回 dtd.promise 的结果是一样的。

差别在什么地方呢?如果我们把 $.when 的这块的代码改成这样的:

var d = wait(dtd);
$.when(d)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
d.resolve();

我们会发现 alert(“哈哈,成功了!”) 会立即执行,“执行完毕”却需要5秒后才弹出来。

但是如果我们 wait 函数最后是 return dtd.promise() 这里 d.resolve() 就会报错了,因为对象 d 不存在 resolve() 方法。

同样如果我们把代码改成:

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
  var tasks = function(){
   alert("执行完毕!");

   dtd.resolve(); // 改变deferred对象的执行状态

 };

 setTimeout(tasks,5000);

 return dtd.promise();
};
dtd.resolve();
$.when( wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

我们也可以发现 alert(“哈哈,成功了!”) 会立即执行,因为 dtd 这个 deferred 对象在被传入 wait 之前,已经被 resolve() 了,而 deferred 对象一旦被 resolve 或者 reject 之后,状态是不会改变的。

然后我们再把 $.wait 这块的代码改成:

$.when( wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
dtd.resolve();

我们也会发现 alert(“哈哈,成功了!”); 被立即执行,虽然 wait(dtd) 执行的时候, dtd 还没有被 resolve,而且 wait 方法返回的是 dtd.promise(), 但是 dtd 这个原始的 deferred 对象是暴露在外面的,我们还是可以从外面改变它的状态。

于是,如果我们真的不想让其他代码能改变 wait 方法内部的 deferred 对象的状态,那我们应该写成这样:

var wait = function(){
  var dtd = $.Deferred(); // 新建一个deferred对象
  var tasks = function(){
    alert("执行完毕!");
   dtd.resolve(); // 改变deferred对象的执行状态

 };

 setTimeout(tasks,5000);

 return dtd.promise();
};
$.when( wait())
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

也就是不要把 deferred 直接暴露出来,最后返回 deferred.promise() ,让其他地方的代码只能添加 handler 。

.promise()

首先这不是Deferred实例的方法!该方法是jQuery实例的方法。该方法用于一组类型的动作(例如动画)全部完成后返回一个Promise对象,供事件监听器监听其状态并执行相应的处理函数。

该方法接受两个可选参数:.promise( [type,] [target] )

type:队列的类型,默认值是fx,fx即jQuery对象的动画.
targetObject :要赋予Promise行为的对象,

这两个参数是可选的。其中第一个参数(我)目前除了fx还没有找到其他的值类型。因此一般都是用于动画的监控,在动画完成后做一些操作。

例子:没有动画效果直接返回一个resolved状态的promise对象

var div = $( "<div />" ); 

div.promise().done(function( arg1 ) { 
 // 将会被马上触发 
 alert( this === div && arg1 === div ); 
});

例子:在动画效果全部完成后触发done()监听函数

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
div { 
 height: 50px; width: 50px; 
 float: left; margin-right: 10px; 
 display: none; background-color: #090; 
} 
</style> 
 <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
  
<button>Go</button> 
<p>Ready...</p> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<script> 
$("button").bind( "click", function() { 
 $("p").append( "Started..."); 
 //每个div执行动画效果 
 $("div").each(function( i ) { 
  $( this ).fadeIn().fadeOut( 1000 * (i+1) ); 
 }); 
 //$("div")包含一组div,在所有的div都完成自己的动画效果后触发done()函数 
 $( "div" ).promise().done(function() { 
  $( "p" ).append( " Finished! " ); 
 }); 
}); 
</script> 
 
</body> 
</html>
Javascript 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 #Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 #Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 #Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 #Javascript
聊一聊JavaScript作用域和作用域链
May 03 #Javascript
小白谈谈对JS原型链的理解
May 03 #Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 #Javascript
You might like
PHP 数组入门教程小结
2009/05/20 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python中的类学习笔记
2014/09/23 Python
详解Python中dict与set的使用
2015/08/10 Python
python difflib模块示例讲解
2017/09/13 Python
Python装饰器语法糖
2019/01/02 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python 多进程原理及实现
2020/12/21 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
高中课程设置方案
2014/05/28 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js