快捷導(dǎo)航

javascript異步處理與Jquery deferred對(duì)象用法總結(jié)

更新時(shí)間：2019年06月04日 10:36:33 作者：輕舞肥羊

這篇文章主要介紹了javascript異步處理與Jquery deferred對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了jQuery異步請(qǐng)求處理相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript異步處理與Jquery deferred對(duì)象用法。分享給大家供大家參考，具體如下：

這是項(xiàng)目組老大整理的一些關(guān)于jquery 異步處理請(qǐng)求，以及使用 jquery deferred 對(duì)象的一些常見方法。雖然是項(xiàng)目上總結(jié)出來的。但也比較通用，分享在這里。

所有的Ajax操作都采用異步處理。
采用Jquery的Deffered對(duì)象來處理異步調(diào)用。
因?yàn)槭钱惒秸{(diào)用，所以$.Ajax函數(shù)的返回值不代表返回的結(jié)果，只是一個(gè)Deffered對(duì)象。
Ajax調(diào)用完成后執(zhí)行的邏輯可以寫成函數(shù)作為參數(shù)傳遞給Deffered對(duì)象的done(), fail(), always()函數(shù)來執(zhí)行。
如果一個(gè)函數(shù)包含Ajax調(diào)用，那么這個(gè)函數(shù)必須將Ajax返回的異步對(duì)象作為自己的返回值，否則函數(shù)的調(diào)用者無法保證后續(xù)代碼的正常執(zhí)行順序。

例如：

function readData(){
  $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData();
//...這里想添加一些后續(xù)處理，但程序?qū)⒃贏jax回調(diào)前執(zhí)行，所以無法達(dá)到預(yù)期目的
正確的代碼：
function readData(){
  return $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData().done(function () {
  //...想添加的后續(xù)處理可以加在這里處理
});

如果需要調(diào)用多個(gè)Ajax請(qǐng)求，請(qǐng)注意Ajax請(qǐng)求是否可以同時(shí)進(jìn)行，如果可以應(yīng)該使用when()函數(shù)來同時(shí)執(zhí)行，以提高程序的運(yùn)行效率和可讀性。
deferred對(duì)象有一個(gè)方法promise()，可以阻止其他代碼修改deferred對(duì)象的狀態(tài)，也就是其他代碼調(diào)用reslove()和reject()無效。

var dtd = $.Deferred(); // 新建一個(gè)Deferred對(duì)象
var wait = function(dtd){
  var tasks = function(){
    alert("執(zhí)行完畢！");
    dtd.resolve(); // 改變Deferred對(duì)象的執(zhí)行狀態(tài)
  };
  setTimeout(tasks,5000);
  return dtd;
};
wait(dtd)
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
dtd.resolve();  //這里修改了dtd對(duì)象的狀態(tài)，導(dǎo)致立刻出現(xiàn)“成功了！”的提示

正確的例子：

var dtd = $.Deferred(); // 新建一個(gè)Deferred對(duì)象
var wait = function(dtd){
  var tasks = function(){
    alert("執(zhí)行完畢！");
    dtd.resolve(); // 改變Deferred對(duì)象的執(zhí)行狀態(tài)
  };
  setTimeout(tasks,5000);
  return dtd.promise(); // 返回promise對(duì)象
};
wait(dtd)
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
dtd.resolve();  //這里修改dtd對(duì)象的狀態(tài)無效

一些情況的處理：

1.嵌套異步操作的處理。

如果一個(gè)函數(shù)內(nèi)部執(zhí)行異步任務(wù)，并且在異步任務(wù)的done回調(diào)內(nèi)會(huì)嵌套另一個(gè)異步任務(wù)，那么簡(jiǎn)單返回第一個(gè)異步任務(wù)的返回值是不行的，需要另外自行定義一個(gè)Deferred對(duì)象作為返回值。

function loadComponent(id){
  var dtd = $.Deferred();
  //loadScript將異步加載一個(gè)js文件，所以返回值是一個(gè)Deffered對(duì)象
  return loadScript(id)
  .done(function() {
    //js加載后，觸發(fā)component的load事件，此事件內(nèi)將使用Ajax獲取頁面模板和數(shù)據(jù)，生成最終的html
    app.getComponent(id).trigger("load")
    .done( function(){
      dtd.reslove(agruments);
    }).fail( function(){
      dtd.reject(agruments);
    });
  });
  //返回自定義的dtd對(duì)象，才能保證返回值的done回調(diào)在load事件完成后執(zhí)行
  return dtd;
}

2.一個(gè)函數(shù)內(nèi)同時(shí)包含同步和異步case的處理。

/* 這個(gè)函數(shù)返回一個(gè)異步對(duì)象，當(dāng)異步對(duì)象執(zhí)行done時(shí)，表示component被加載完成 */
function requireComponent(id){
  if (this.components[id]){
    //如果component已經(jīng)被加載，直接返回一個(gè)reslove的異步對(duì)象，否則返回值內(nèi)容與else分支不同，后續(xù)代碼難以處理
    var dtd = $.Deferred();
    dtd.reslove(this.getComponent(id));
    return dtd;
  }
  else{
    //如果component未被加載，loadScript將異步加載JavaScript并執(zhí)行，然后將被加載的component放入this.components
    return loadScript(id);
  }
}

Jquery異步模型有一個(gè)缺點(diǎn)，就是缺乏類似wait操作的處理能力，如果多個(gè)異步調(diào)用要順序發(fā)生時(shí)，就要在done里面嵌套處理，影響代碼可讀性.

aSyncTask1.done( function () {
  //...第一個(gè)操作完成后的處理
  asyncTask2.done( function () {
    //...第二個(gè)操作完成后的處理
    asyncTask3.done( function () {
      //...第三個(gè)操作完成后的處理
    });
  })
})

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery文件與目錄操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: