1. 程式人生 > >JQuery的deferred對象學習總結

JQuery的deferred對象學習總結

.ajax defer 兩個 () con api inf .html code

什麽是deferred?

可以幫助我們按規定的順序執行函數,比如說我們ajax請求數據之後,對dom進行數據填充,那我們就要先執行完ajax,拿到數據之後才能進行dom數據填充,所以這就是一個順序執行的過程,傳統的做法是事先定義好回調函數,當檢測到數據請求完成時,執行事先定義的回調函數。但是,在回調函數方面,jQuery的功能非常弱。為了改變這一點,jQuery開發團隊就設計了deferred對象。幫助我們更好的控制函數執行順序。

1.5版本後的jquery使用$.ajax()返回的是deferred對象

deferred常見用法:

1.鏈式調用

 $.ajax("test.html")
  .done(
function(){ alert("哈哈,成功了!"); })   .fail(function(){ alert("出錯啦!"); });

當請求完成,執行done方法;當請求失敗,執行fail方法。

2.指定同一操作的多個回調函數

deferred對象的一大好處,就是它允許你自由添加多個回調函數。而如果使用傳統的回調函數,那麽我們只能定義一個success方法。

  $.ajax("test.html")
  .done(function(){ alert("哈哈,成功了!");} )
  .fail(function(){ alert("出錯啦!"); } )
  .done(
function(){ alert("第二個回調函數!");} );

可以看到,我們調用了兩個done方法,當請求成功時,會按他們調用的順序來先後執行兩個done方法。

3.為多個操作指定回調函數

deferred對象的另一大好處,就是它允許你為多個事件指定一個回調函數,這是傳統寫法做不到的。

  $.when($.ajax("test1.html"), $.ajax("test2.html"))
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出錯啦!"); });

可以看到,使用when方法,我們可以實現當兩個ajax都成功時才執行done方法。

4.deferred對象不僅適用於ajax,任何本地操作你都可以使用deffer對象來控制你的方法執行順序。

  var wait = function (dtd) {
      var dtd = $.Deferred();
      var tasks = function () {
          alert("任務完成!");
          dtd.resolve("666");
      };
      setTimeout(tasks, 3000);

      return dtd;
   };


   $.when(wait())
          .done(function (info) {
              console.log(info);
          })
          .fail()
          .always(function (info) {     //不管成功或失敗都會執行always方法
              console.log(info);
          });

總結:deferred對象是jquery團隊設計開發的一個對象,可以幫助我們實現函數按順序調用。ajax使用deferred對象只是其中的一種用途,任何其他本地操作都能使用deferred對象。

JQuery的deferred對象學習總結