首頁 web前端 js教程 jQuery的deferred物件詳解_jquery

jQuery的deferred物件詳解_jquery

May 16, 2016 pm 04:31 PM
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("已執行!");} );
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

jQuery引用方法詳解:快速上手指南 jQuery引用方法詳解:快速上手指南 Feb 27, 2024 pm 06:45 PM

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

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

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

深度剖析:jQuery的優勢與劣勢 深度剖析:jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

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

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

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

jQuery如何移除元素的height屬性? jQuery如何移除元素的height屬性? Feb 28, 2024 am 08:39 AM

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

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

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

了解jQuery中eq的作用及應用場景 了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

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

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

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

See all articles