首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

深入解析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>

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

- Author -

阿伦孟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
异步回调(1) Springboot-cli(1) 对齐打印(1) 计算器(5) FutureTask(3) CompletableFuture(1) JAVA(88) 底部导航(1) ForkJoin(1) format(1)
You might like
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php简单实现数组分页的方法
2016/04/30 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python探索之修改Python搜索路径
2017/10/25 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
最新计算机专业自荐信
2013/10/16 职场文书
商业房地产广告语
2014/03/13 职场文书
安全教育演讲稿
2014/05/09 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
《比的意义》教学反思
2016/02/18 职场文书