`
zsuczw
  • 浏览: 51211 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery Deferred模块详解

阅读更多
jQuer 1.5版本引入Deferred功能, 为处理事件回调提供了更加强大而灵活的编程模型.

什么Deferred
根据jQuery的官方api文档的描述: jQuery.Deferred()是可链式调用的工具对象, 它能够注册回调函数到一个队列中, 依次调用该队列中的回调函数,并且能够将调链中上一个函数(同步或者异步)的返回状态传递到下一个回调函数中.

jQuery.Deferred()背后的设计理念来自CommonJS Promises/A , jQuery.Deferred()基于这个理念实现,但并没有完全遵循其设计。其它语言或者框架,例如python和dojo中都有类似的实现。

下面简单介绍一下 “Promises”的设计思想,目的在于下文介绍jQuery.Deferred()的API时,让大家能有一个理论上的了解。

Promise, 中文可以理解为愿望,代表单个操作完成的最终结果。一个Promise拥有三种状态:分别是unfulfilled(未满足的)、fulfilled(满足的)、failed(失败的),fulfilled状态和failed状态都可以被监听。一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化。这种“不可改变”的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行为异常。例如:一个监听fulfilled状态的监听器把Promise的状态修改为failed,那么将触发failed状态的监听器,而如果一个failed状态监听器又把Promise的状态设置为fulfilled,那么又将触发fulfilled状态的监听器,这样将导致死循环。另外一种理解Promise这种特性的方式是把Promise看成是javascript中的primative类型的变量,这种变量可以被传入被调用的函数中,但是不可以被调用函数所改变。

每一个Promise对象都有一个方法:then(fulfilledHandler, errorHandler, progressHandler),用于监听一个Promise的不同状态。fulfilledHandler用于监听fulfilled事件,errorHandler用于监听failed事件,progressHandler用于监听progress事件。一个Promise不强制实现progress状态的事件监听(jQuery的Deferred就是一个Promise的实现,但没有实现对progress状态事件的处理)。

then(...)函数中的fulfilledHandler和errorHandler的返回值是一个新的Promise对象, 以便能够链式调用then(...)函数。每一个回调函数在正常情况下返回的是处于fulfilled状态的Promise,如果该回调函数返回错误值,那么返回的Promise状态将会变为failed。

【疑惑:】以上对于Promise的介绍基本由英文原文翻译而来。感觉英文原文中的描述有点矛盾。例如前面说一个Promise的状态只能从unfulfilled变为fulfilled或者failed,可是又在后面说一个回调函数如果失败,将会把一个Promise从fulfilled状态变为failed状态。还请读者阅读原文 自行甄别。

幸好jQuery的Promise实现, Deferred,要清晰的多。下面将详细介绍jQuery.Deferred()的API。

Deferred API介绍

1. 构造函数

//方式一:
var deferred = $.Deferred();
//方式二:使用new操作符号,一般不这样做,显得冗余
var deferred = new $.Deferred();
//方式三:传入一个函数作为回调函数,这个函数会在构造的Deferred对象返回前执行。该函数被传入要返回的Deferred对象作为参数
//在函数内部this指向要返回的Deferred对象。
var dfd = new $.Deferred(function(newDeferred){
	this.then(function(){console.log("new deferred");});
});


2. 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对象的内在状态,从而起到很好的隔离保护作用。

	$(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"


接下来介绍.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>


3. deferred.then()
用于给一个deferred对象添加监听器。该方法接受两个参数:

deferred.then( doneCallbacks, failCallbacks )

doneCallbacks: 一个函数,或者是一组函数,在deferred被实现时调用
failCallbacks: 一个函数,或者是一组函数,在deferred被拒绝时调用

例子:
$.get("test.php").then(
    function(){ alert("$.get succeeded"); },
    function(){ alert("$.get failed!"); }
);


deferred.then()提供了一种方便的写法,让一个deferred在实现或者被拒绝时的监听函数可以写在一个api中。

4. deferred.done()

用于添加deferred被实现时的监听函数。该方法可以接收一到多个参数,每个参数都是一个函数或者一组函数。

例子:

	$(function(){
		var dfd = $.Deferred();
		var func1 = function() {alert("1");};
		var func2 = function() {alert("2");};
		
		dfd.done(func1, [func1, func2], func2);
		dfd.resolve();
	})


5. deferred.fail()
用于添加deferred失败时的监听函数。该方法可以接收一到多个参数,每个参数都是一个函数或者一组函数。
	$(function(){
		var dfd = $.Deferred();
		var func1 = function() {alert("1");};
		var func2 = function() {alert("2");};
		
		dfd.fail(func1, [func1, func2], func2);
                //调用reject方法触发fail事件处理函数
		dfd.reject();
	})


6. deferred.reject() 和 deferred.rejectWith()
这两个方法将一个Deferred对象的状态由未实现置为失败状态,将触发该deferred的fail回调函数。如果deferred的状态已经是“已实现”,那么将不生效。

reject函数可以接收一个参数,用于传给deferred的failCallback。而deferred.rejectWith()额外接受一个参数context,作为在fail回调函数中this的值。
例子:deferred.reject([args])

见5中的例子。

例子:deferred.rejectWith(),指定context
	$(function(){
		var dfd = $.Deferred();
		dfd.fail(function(cause){
			console.log(cause);
			console.log(this.name);
		});
		
		dfd.rejectWith({name: 'demo'}, ["invalid input!"]);
	}) 


Deferred的应用

1)与$.when()一起调用

$.when()提供了一种根据Defererred对象的状态来执行回调函数的办法。它接受一个或者多个Defeered对象。

	$(function(){
		 $.when($.ajax('test.html')).then(function(data, textStatus, jqXHR){
			 console.log(data);
		 },function(){
			 alert('failure');
		 })
	});


在只使用一个参数的情况下,$.when()和直接使用Deferred对象没有什么区别,它也返回一个Deferred对象。$.when()更大的作用在于使用多个Defeered对象时,此时$.when()返回一个包含所有Deferred状态的超级Deferred对象。并且如果有一个Deferred失败,那么这个超级Deferred的状态将为failed,只有在所有Deferred对象都实现时,返回的超级Deferred对象状态才为resolved。

	$(function(){
                 //假设test.html不存在,那么将调用fail回调函数,弹出alert对话框
		 $.when($.ajax('test.html'), $.ajax('test.html')).then(function(args1,args2){
			 console.log(args1);
		 },function(){
			 alert('failure');
		 })
	});


这非常适用于以下的业务场景:当一个回调函数需要依赖多个ajax请求取回数据才能被触发的情况。
分享到:
评论
6 楼 niuqiang2008 2015-05-27  
4楼可以先看看 $.Callbacks()
5 楼 niuqiang2008 2015-05-27  
楼主辛苦了
4 楼 wellse 2015-04-01  
我为什么不怎么看的懂呢?
3 楼 sennar 2013-05-22  
学习学习!
2 楼 glchen 2012-11-17  
又长见识了!!
1 楼 leaow567 2012-09-11  
写的不错

相关推荐

    jQuery之Deferred对象详解

    主要介绍了jQuery之Deferred对象详解,本文深入剖析了jQuery Deferred对象的方法属性等内容,需要的朋友可以参考下

    javascript异步处理与Jquery deferred对象用法总结

    本文实例讲述了javascript异步处理与Jquery deferred对象用法。分享给大家供大家参考,具体如下: 这是项目组老大整理的一些关于jquery 异步处理请求,以及使用 jquery deferred 对象的一些常见方法。虽然是项目上...

    Deferred:Deferred JS 库 - JQuery Deferred 的替代品

    Deferred.JS 是JQuery Deferred objects的替代品。 (行为与 JQuery Deferred 相同)。 阅读以了解为什么您应该从 JQuery Deferred 迁移到 Deferred.JS。 要从 JQuery Deferred 迁移到 Deferred.JS,请参阅 。 ...

    jquery Deferred 快速解决异步回调的问题

    jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise(); } $.when(ok(1),ok(2)).then(function...

    jQuery的deferred对象详解

    为了改变这一点,jQuery开发团队就设计了deferred对象。 简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个

    jQuery中deferred对象使用方法详解

    在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。 那就来看看deferred对象的用法。 1...

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery...

    jQuery通过deferred对象管理ajax异步

    主要介绍了jQuery通过deferred对象管理ajax异步的相关资料,需要的朋友可以参考下

    谈谈jQuery之Deferred源码剖析

    主要介绍了谈谈jQuery之Deferred源码剖析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery的deferred对象使用详解

    deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

    jQuery.deferred对象使用详解

    主要为大家详细介绍了jQuery.deferred对象的使用方法,内容很全面,感兴趣的小伙伴们可以参考一下

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

    一个Deferred.Promise对象可以理解为是deferred对象的一个视图,它只包含deferred对象的一组方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个deferred的状态,而无法...

Global site tag (gtag.js) - Google Analytics