jQuery之Deferred对象详解(2)
该方法用来返回deferred对象目前的状态。 复制代码 代码如下: var deferred = new $.Deferred(); deferred.state(); // "pending" deferred.resolve(); deferred.state(); // "resolved" 该方
该方法用来返回deferred对象目前的状态。
复制代码 代码如下:
var deferred = new $.Deferred();
deferred.state(); // "pending"
deferred.resolve();
deferred.state(); // "resolved"
该方法的返回值有三个：
1.pending：表示操作还没有完成。
2.resolved：表示操作成功。
3.rejected：表示操作失败。
notify() 和 progress()
progress()用来指定一个回调函数，当调用notify()方法时，该回调函数将执行。它的用意是提供一个接口，使得在非同步操作执行过程中，可以执行某些操作，比如定期返回进度条的进度。
复制代码 代码如下:
var userProgress = $.Deferred();
var $profileFields = $("input");
var totalFields = $profileFields.length
userProgress.progress(function (filledFields) {
var pctComplete = (filledFields/totalFields)*100;
$("#progress").html(pctComplete.toFixed(0));
});
userProgress.done(function () {
$("#thanks").html("Thanks for completing your profile!").show();
});
$("input").on("change", function () {
var filledFields = $profileFields.filter("[value!='']").length;
userProgress.notify(filledFields);
if (filledFields == totalFields) {
userProgress.resolve();
}
});
then()
then()的作用也是指定回调函数，它可以接受三个参数，也就是三个回调函数。第一个参数是resolve时调用的回调函数，第二个参数是reject时调用的回调函数，第三个参数是progress()方法调用的回调函数。
复制代码 代码如下:
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
在jQuery 1.8之前，then()只是.done().fail()写法的语法糖，两种写法是等价的。在jQuery 1.8之后，then()返回一个新的deferred对象，而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值，该返回值会作为参数，传入后面的回调函数。
复制代码 代码如下:
var defer = jQuery.Deferred();
defer.done(function(a,b){
return a * b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a * b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a * b;
}).done(function( result ) {
console.log("result = " + result);
});
defer.resolve( 2, 3 );
在jQuery 1.8版本之前，上面代码的结果是：
复制代码 代码如下:
result = 2
result = 2
result = 2
在jQuery 1.8版本之后，返回结果是
复制代码 代码如下:
result = 2
result = 6
result = NaN
这一点需要特别引起注意。
复制代码 代码如下:
$.ajax( url1, { dataType: "json" } )
.then(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
}).done(function( data ) {
// 从url2获取的数据
});
上面代码最后那个done方法，处理的是从url2获取的数据，而不是从url1获取的数据。
精彩图集
精彩文章