jQuery的deferred物件詳解_jquery
一、什麼是deferred物件?
開發網站的過程中,我們經常遇到某些耗時很長的javascript操作。其中,既有異步的操作(例如ajax讀取伺服器資料),也有同步的操作(例如遍歷一個大型陣列),它們都不是立即能得到結果的。
通常的做法是,為它們指定回呼函數(callback)。即事先規定,一旦它們運行結束,應該呼叫哪些函數。
但是,在回呼函數方面,jQuery的功能非常弱。為了改變這一點,jQuery開發團隊就設計了deferred物件。
簡單說,deferred物件就是jQuery的回呼函數解決方案。在英文中,defer的意思是"延遲",所以deferred物件的意思是"延遲"到未來某個點再執行。
它解決瞭如何處理耗時操作的問題,對那些操作提供了更好的控制,以及統一的程式設計介面。它的主要功能,可以歸結為四點。下面我們透過範例程式碼,一步步來學習。
二、ajax操作的鍊式寫法
首先,回顧一下jQuery的ajax操作的傳統寫法:
$.ajax({
url: "test.html",
success: function(){
alert("哈哈,成功了!");
},
error:function(){
alert("出錯!");
}
});
在上面的程式碼中,$.ajax()接受一個物件參數,這個物件包含兩個方法:success方法指定操作成功後的回呼函數,error方法指定操作失敗後的回呼函數。
$.ajax()操作完成後,如果使用的是低於1.5.0版本的jQuery,返回的是XHR對象,你沒法進行鍊式操作;如果高於1.5.0版本,返回的是deferred對象,可以進行鍊式操作。
現在,新的寫法是這樣的:
$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
可以看到,done()相當於success方法,fail()相當於error方法。採用鍊式寫法以後,程式碼的可讀性大大提高。
三、指定同一操作的多個回呼函數
deferred物件的一大好處,就是它允許你自由添加多個回呼函數。
還是以上面的程式碼為例,如果ajax操作成功後,除了原來的回呼函數,我還想再運行一個回呼函數,怎麼辦?
很簡單,直接把它加在後面就行了。
$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!");} )
.fail(function(){ alert("出錯啦!"); } )
.done(function(){ alert("第二個回呼函數!");} );
回呼函數可以添加任意多個,它們按照添加順序執行。
四、為多個運算指定回呼函數
deferred物件的另一個好處,就是它允許你為多個事件指定一個回呼函數,這是傳統寫法做不到的。
請看下面的程式碼,它用到了一個新的方法$.when():
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
這段程式碼的意思是,先執行兩個動作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就執行done()指定的回調函數;如果有一個失敗或都失敗了,就執行fail()指定的回呼函數。
五、普通操作的回呼函數介面(上)
deferred物件的最大優點,就是它把這套回調函數接口,從ajax操作擴展到了所有操作。也就是說,任何一個操作----不管是ajax操作還是本地操作,也不管是非同步操作還是同步操作----都可以使用deferred物件的各種方法,指定回調函數。
我們來看一個具體的例子。假設有一個很耗時的操作wait:
var wait = function(){
var tasks = function(){
alert("執行完畢!");
};
setTimeout(tasks,5000);
};
我們為它指定回呼函數,該怎麼做呢?
很自然的,你會想到,可以用$.when():
$.when(wait())
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
[code]
但是,這樣寫的話,done()方法會立即執行,起不到回呼函數的作用。原因在於$.when()的參數只能是deferred對象,所以必須改寫wait():
[code]
var dtd = $.Deferred(); // 新建一個deferred物件
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變deferred物件的執行狀態
};
setTimeout(tasks,5000);
return dtd;
};
現在,wait()函數傳回的是deferred對象,這就可以加上鍊式運算了。
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
wait()函式運行完,就會自動執行done()方法指定的回呼函數。
六、deferred.resolve()方法和deferred.reject()方法
如果仔細看,你會發現在上面的wait()函數中,還有一個地方我沒講解。那就是dtd.resolve()的作用是什麼?
要說清楚這個問題,就要引入一個新概念"執行狀態"。 jQuery規定,deferred物件有三種執行狀態----未完成,已完成和失敗。如果執行狀態是"已完成"(resolved),deferred物件立刻呼叫done()方法指定的回呼函數;如果執行狀態是"已失敗",則呼叫fail()方法指定的回呼函數;如果執行狀態是"未完成",則繼續等待,或呼叫progress()方法指定的回呼函數(jQuery1.7版本新增)。
前面部分的ajax操作時,deferred物件會根據回傳結果,自動改變自身的執行狀態;但是,在wait()函數中,這個執行狀態必須由程式設計師手動指定。 dtd.resolve()的意思是,將dtd物件的執行狀態從"未完成"改為"已完成",從而觸發done()方法。
類似的,還有一個deferred.reject()方法,作用是將dtd物件的執行狀態從"未完成"改為"已失敗",從而觸發fail()方法。
var dtd = $.Deferred(); // 新建一個Deferred物件
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.reject(); // 改變Deferred物件的執行狀態
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
七、deferred.promise()方法
上面這種寫法,還是有問題。那就是dtd是全域對象,所以它的執行狀態可以從外部改變。
請看下面的程式碼:
var dtd = $.Deferred(); // 新建一個Deferred物件
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變Deferred物件的執行狀態
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
dtd.resolve();
我在程式碼的尾部加了一行dtd.resolve(),這就改變了dtd物件的執行狀態,因此導致done()方法立刻執行,跳出"哈哈,成功了!"的提示框,等5秒之後再跳出"執行完畢!"的提示框。
為了避免這種情況,jQuery提供了deferred.promise()方法。它的作用是,在原來的deferred物件上返回另一個deferred對象,後者只開放與改變執行狀態無關的方法(例如done()方法和fail()方法),屏蔽與改變執行狀態有關的方法(例如resolve()方法和reject()方法),從而使得執行狀態不能被改變。
請看下面的程式碼:
var dtd = $.Deferred(); // 新建一個Deferred物件
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變Deferred物件的執行狀態
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise物件
};
var d = wait(dtd); // 新建一個d對象,改為對這個對象進行操作
$.when(d)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
d.resolve(); // 此時,這個語句是無效的
在上面的這段程式碼中,wait()函數回傳的是promise物件。然後,我們把回呼函數綁定在這個物件上面,而不是原來的deferred物件上面。這樣的好處是,無法改變這個物件的執行狀態,要改變執行狀態,只能操作原來的deferred物件。
不過,更好的寫法是allenm所指出的,將dtd物件變成wait()函數的內部物件。
var wait = function(dtd){
var dtd = $.Deferred(); //在函數內部,新建一個Deferred物件
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變Deferred物件的執行狀態
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise物件
};
$.when(wait())
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
八、普通操作的回呼函數介面(中)
另一種防止執行狀態被外部改變的方法,是使用deferred物件的建構子$.Deferred()。
這時,wait函數還是保持不變,我們直接把它傳入$.Deferred():
$.Deferred(wait)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
jQuery規定,$.Deferred()可以接受一個函數名稱(注意,是函數名)作為參數,$.Deferred()所產生的deferred物件將作為這個函數的預設參數。
九、普通操作的回呼函數介面(下)
除了上面兩種方法以外,我們還可以直接在wait物件上部署deferred介面。
var dtd = $.Deferred(); // 產生Deferred物件
var wait = function(dtd){
var tasks = function(){
alert("執行完畢!");
dtd.resolve(); // 改變Deferred物件的執行狀態
};
setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出錯啦!"); });
wait(dtd);
這裡的關鍵是dtd.promise(wait)這一行,它的作用就是在wait物件上部署Deferred介面。正是因為有了這一行,後面才能直接在wait上面呼叫done()和fail()。
十、小結:deferred物件的方法
前面已經講到了deferred物件的多種方法,下面做一個總結:
(1) $.Deferred() 產生一個deferred物件。
(2) deferred.done() 指定操作成功時的回呼函數
(3) deferred.fail() 指定操作失敗時的回呼函數
(4) deferred.promise() 沒有參數時,傳回一個新的deferred對象,該物件的運作狀態無法改變;接受參數時,作用為在參數物件上部署deferred介面。
(5) deferred.resolve() 手動改變deferred物件的運作狀態為"已完成",從而立即觸發done()方法。
(6)deferred.reject() 這個方法與deferred.resolve()正好相反,呼叫後將deferred物件的運作狀態變為"已失敗",從而立即觸發fail()方法。
(7) $.when() 為多個運算指定回呼函數。
除了這些方法以外,deferred物件還有二個重要方法,上面的教學中沒有涉及。
(8)deferred.then()
有時為了省事,可以把done()和fail()合在一起寫,這就是then()方法。
$.when($.ajax( "/main.php" ))
.then(successFunc, failureFunc );
如果then()有兩個參數,那麼第一個參數是done()方法的回呼函數,第二個參數是fail()方法的回呼方法。如果then()只有一個參數,那麼等同於done()。
(9)deferred.always()
這個方法也是用來指定回呼函數的,它的作用是,不管呼叫的是deferred.resolve()還是deferred.reject(),最後總是執行。
$.ajax( "test.html" )
.always( function() { alert("已執行!");} );

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南jQuery是一個受歡迎的JavaScript庫,被廣泛用於網站開發中,它簡化了JavaScript編程,並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法,並提供具體的程式碼範例,幫助讀者快速上手。引入jQuery首先,我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入,也可以下載

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

jQuery是一款廣泛應用於前端開發的快速、小巧、功能豐富的JavaScript庫。自2006年發布以來,jQuery已成為眾多開發者的首選工具之一,但在實際應用中,它也不乏一些優點和缺點。本文將深度剖析jQuery的優勢與劣勢,並結合具體的程式碼範例進行說明。優點:1.簡潔的語法jQuery的語法設計簡潔明了,可以大幅提升程式碼的可讀性和編寫效率。比如,

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:<

jQuery如何移除元素的height屬性?在前端開發中,經常會遇到需要操作元素的高度屬性的需求。有時候,我們可能需要動態改變元素的高度,而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性,並提供具體的程式碼範例。在使用jQuery操作高度屬性之前,我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

jQuery是一種流行的JavaScript庫,被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中,eq()方法是用來選擇指定索引位置的元素的方法,具體使用方法和應用場景如下。在jQuery中,eq()方法選擇指定索引位置的元素。索引位置從0開始計數,即第一個元素的索引是0,第二個元素的索引是1,依此類推。 eq()方法的語法如下:$("s

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬
