jQuery Deferred模块详解(2)_H5之家 - 中国HTML5教程资源分享第一站

例子：在动画效果全部完成后触发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请求取回数据才能被触发的情况。

原文地址：