首頁 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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++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中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?

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

jQuery如何移除元素的height屬性?

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

jQuery小技巧:快速修改頁面所有a標籤的文本

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

使用jQuery修改所有a標籤的文字內容

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

深度剖析:jQuery的優勢與劣勢

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

了解jQuery中eq的作用及應用場景

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

如何判斷jQuery元素是否具有特定屬性?

See all articles