jQuery的deferred對象講解

今天,講解下jQuery的deferred對象

 

首先,有的人可能不知道deferred對象是幹嘛的:

我們在前端編程過程中,有些比較耗時的操作,不管是異步還是同步,尤其是異步,我們總是希望不管在它耗時多久之後,不管執行多久,都可以調用到回調函數,最常用的就是ajax了,發送一個異步請求後,繼續執行下面的,如果執行完畢,會去判斷執行成功還是失敗,然後去自動調用success/error回調函數,deferred對象也是這樣,但不僅僅是這樣。

最通俗易懂的解釋:可以讓你前端開發時進行鏈式編程,還有就是監聽耗時操作,執行指定回調

 

例如:

還有一種寫法,使用then:

 

還有一個

always:不管成功還是失敗,都會執行,等價於complete

 

還可以爲多個deferred指定同一個對調:

 

此時小夥伴們有疑問了,講了這麼半天,一直沒有看到哪裏提到了deferred啊,

其實這些操作都是deferred對象才擁有的,只不過$.ajax()方法,會返回一個deferred對象,然後進行監聽

解析開等價於:

 

ok,接下來說一下deferred對象的狀態,deferred對象共有三種狀態:

1.未完成:一直監聽,不做任何操作

2.已完成:執行done回調

3.已失敗:執行fail回調

上述的狀態是一個deferred對象擁有的狀態,$.when就監聽這個狀態,然後根據不同狀態進行不同的回調操作

 

說一說deferred對象有哪些方法:

1.$.Deferred():構建一個deferred對象返回

可以接受一個參數(方法):構建一個deferred對象,並將該deferred對象作用於該方法上,會將生成的deferred對象作爲該方法的默認參數去使用(如果該方法多個參數,請注意)

2.deferred.done(function):指定操作成功時的回調函數

3.deferred.fail(function):指定操作失敗時的回調函數

4.deferred.always(function):指定操作執行完畢時的回調函數,無論成功失敗,都會執行

5.deferred.promise():

a.無參數時:返回一個deferred對象,除了該操作,其他地方無法修改該deferred的狀態

b.有參數時:將該deferred作用於方法上,然後方法就可以被監聽,去執行done,fail....回調

6.deferred.resolve():手動改變deferred對象的運行狀態爲”已完成”,從而立即觸發done()方法

7.deferred.reject():手動改變deferred對象的運行狀態變爲”已失敗”,從而立即觸發fail()方法

8.$.when():

a.監聽指定的deferred對象

b.爲多個操作指定回調函數

9.deferred.then():上面已經說了,這裏不重複

 

講一下監聽一個耗時操作,但是該對象又不是deferred對象:

需求:我想要監聽這樣一個耗時操作,在執行完畢後,輸出執行成功 or 執行失敗

 

思路:

1.想要在執行完畢去判斷執行成功還是失敗,然後做回調操作,就要去監聽

2.wait方法不是個deferred對象,無法直接去監聽

3.將wait方法變成deferred對象然後去監聽,ok

 

解答:

一、最基礎的實現需求

缺陷:除了wait1方法內部可以修改deferred的狀態,其他地方只要能讀取到deferred的,也可以修改狀態,監聽又是在監聽狀態,有時候可能會出現意料之外的錯誤

 

二、修改思路:讓除了wait1方法內部,其他地方無法修改deferred的狀態

解決:使用promise

 

三、還有一種解決辦法,部署接口

 

四、還是一個方法,在構建deferred對象的時候就傳遞方法進去,然後直接監聽

 

我個人還是喜歡用第二種方法,都可以使用,看個人喜好了,Ending~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章