deferred對象

沈建明發布于2019-08-20 16:30 / 1265人閱讀

摘要：如果狀態是已完成，對象就是調用方法指定的回調函數如果狀態是已失敗，對象就是調用方法指定的回調函數。四對象的其他方法方法，接受兩個參數，第一個參數是方法的回調函數第二個參數是方法的回調函數。

deferred對象

deferred對象就是jQuery的回調函數解決方案

javascript中有一些操作比較耗時，如ajax操作，面對這樣的情況，我們通常會指定回調函數。所謂回調函數就當這些操作結束后，應該調用哪些函數。

一、傳統的ajax操作

$.ajax({
    url : index.html,
    success : function(){
        alert("success");
    },
    error : function(){
        alert("fail");
    }  
});

這里的success方法指定了操作成功后的回調函數，fail方法指定了操作失敗后的回調函數。下面我們再來看一下，用deferred對象，寫法是怎樣的？

二、deferred對象的鏈式操作

$.ajax("index.html")
.done(function(){alert("success");})
.fail(function(){alert("fail");});

這里的done()相當于success方法，fail()相當于error方法。這種鏈式寫法很清晰、可讀性也很強。deferred對象的強大還不止于此。

1、deferred對象可以為一個操作指定多個回調函數。

$.ajax("index.html")
.done(function(){alert("success");})
.fail(function(){alert("fail");})
.done(function(){alert("第二個回調函數");});

像上面這樣，我們可以指定任意多個回調函數，這些回調函數按順序執行。

2、為多個操作指定回調函數

$.when($.ajax("index1.html"),$.ajax("index.html"))
.done(function(){alert("success");})
.fail(function(){alert("fail");});

這里我們用到了$.when()方法，這個方法的參數是deferred對象，這段代碼的意思是只有兩個操作都成功了，才運行done()指定的回調函數，其他情況運行fail()指定的回調函數.

三、普通操作的回調函數

deferred對象最大的有點在于，對于ajax操作、本地操作；異步操作、同步操作，都可以使用deferred對象的方法指定回調函數.

比如說有一個很耗時的操作wait:

var wait=function(){
    var tasks=function(){
        alert("執行完畢");
    }
    setTimeout(tasks,5000); //真的很耗時
}

如果我們想為這個函數指定回調函數，應該怎么做呢？我們首先來深入的了解一下deferred對象.

1、三種執行狀態

deferred對象有三種執行狀態：未完成、已完成、已失敗。如果狀態是已完成，deferred對象就是調用done()方法指定的回調函數；如果狀態是已失敗，deferred對象就是調用fail()方法指定的回調函數。deferred.resolve()方法將執行狀態從未完成改為已完成，從而調用done()方法；deferred.reject()方法將執行狀態從未完成改為已失敗，從而調用fail()方法。

2、改變狀態

前面提到的ajax操作，deferred對象會根據返回的結果，自動改變自身的狀態；但在wait函數中，需要手動改變 deferred的執行狀態，從而觸發相關回調函數。

3、deferred.promise()方法

deferred.promise()的作用是在原來deferred對象上返回另一個deferred對象，后者只開放與執行狀態無關的方法(如 done() 方法和 fail() 方法)，屏蔽改變執行狀態有關的方法(如 resolve()方法reject() 方法)。

了解了以上三點之后，我們來為wait()函數指定回調函數。

var wait=function(){
    var dfd=$.Deferred(); //在函數內部創建一個deferred對象
    var tasks=function(){
        alert("執行完畢");
        dfd.resolve(); //改變執行狀態
    }
    setTimeout(tasks,5000);
    return dfd.promise(); //返回promise對象
};

$.when(wait())
.done(function(){alert("success");})
.fail(function(){alert("fail");})

這里有三點需要注意：

最好在函數的內部創建deferred對象，這樣可以防止在外部修改deferred對象的執行狀態。

最好返回promise對象，還是防止執行狀態在函數外部被改變。

要在合適的時候改變deferred對象的執行狀態，一般是在耗時的操作執行完之后，改變deferred對象的執行狀態。

這樣我們就完成了為普通操作添加回調函數。

四、deferred對象的其他方法

deferred.then()方法，接受兩個參數，第一個參數是done()方法的回調函數；第二個參數是fail()方法的回調函數。具體寫法如下：

$.when($.ajax("index.html"))
.then(successFunction , failFunction);

這樣省力了一下呢！

deferred.resolve(arg)方法是可以接受參數的，這個參數將會傳遞給通過deferred.then或deferred.done 添加的doneCallbacks

本文主要簡單的介紹了一下deferred對象的使用場景和使用方法。

關于deferred對象的其他方法，請大家查看jquery官方文檔

我在學習過程中閱讀的相關文獻

GPU云服務器云服務器 jquery_deferred對象 deference Deferred defer

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82957.html

jquery 中的 deferred 對象

摘要：中文文檔簡單說，對象就是的回調函數解決方案。為了讓回調函數的名字統一，便于在中使用。普通操作的回調函數接口對象的最大優點，就是它把這一套回調函數接口，從操作擴展到了所有操作。指定操作成功時的回調函數。參考鏈接 jQuery API中文文檔 jQuery.Deferred jQuery.when jQuery的deferred對象詳解 jQuery deferred 對象的 prom...

Meathill 2019-08-23 16:26 評論0 收藏0
jQuery的deferred對象詳解

摘要：通常的做法是，為它們指定回調函數。簡單說，對象就是的回調函數解決方案。指定操作成功時的回調函數指定操作失敗時的回調函數沒有參數時，返回一個新的對象，該對象的運行狀態無法被改變接受參數時，作用為在參數對象上部署接口。轉自：阮一峰：http://www.ruanyifeng.com/blo... 一、什么是deferred對象？開發網站的過程中，我們經常遇到某些耗時很長的javascri...

lei___ 2019-08-20 15:52 評論0 收藏0
jQuery Deferred對象

摘要：給普通的操作指定回調函數對象的最大優點，就是它把這一套回調函數接口，從操作擴展到了所有操作。方法用于指定對象狀態為已失敗時的回調函數。執行完畢執行成功執行失敗接收一個或多個對象作為參數，為其指定回調函數。什么是deferred對象開發網站的過程中，我們經常遇到某些耗時很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務器數據），也有同步的操作（比如遍歷一個大型...

baoxl 2019-08-20 15:28 評論0 收藏0
讀Zepto源碼之Deferred模塊

摘要：為的項，取出來的分別為和，所以上的和方法，調用的是中的方法，實質是往各自的回調列表中添加回調函數。進度回調函數數組。參數為異步對象的索引值，參數為對應的上下文數組，即或，為對應的回調函數數組，即或。 Deferred 模塊也不是必備的模塊，但是 ajax 模塊中，要用到 promise 風格，必需引入 Deferred 模塊。Deferred 也用到了上一篇文章《讀Zepto源碼之C...

yagami 2019-08-20 18:25 評論0 收藏0
$.when().done().then()的用法

摘要：通常的做法是，為它們指定回調函數。指定操作成功時的回調函數指定操作失敗時的回調函數沒有參數時，返回一個新的對象，該對象的運行狀態無法被改變接受參數時，作用為在參數對象上部署接口。 jQuery的開發速度很快，幾乎每半年一個大版本，每兩個月一個小版本。每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。這個功...

KoreyLee 2019-08-23 12:15 評論0 收藏0