溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-08-22 02:46:38 來源：腳本之家 閱讀：152 作者：輕舞肥羊 欄目：web開發(fā)

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

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

  • 所有的Ajax操作都采用異步處理。
  • 采用Jquery的Deffered對象來處理異步調(diào)用。
  • 因?yàn)槭钱惒秸{(diào)用，所以$.Ajax函數(shù)的返回值不代表返回的結(jié)果，只是一個Deffered對象。
  • Ajax調(diào)用完成后執(zhí)行的邏輯可以寫成函數(shù)作為參數(shù)傳遞給Deffered對象的done(), fail(), always()函數(shù)來執(zhí)行。
  • 如果一個函數(shù)包含Ajax調(diào)用，那么這個函數(shù)必須將Ajax返回的異步對象作為自己的返回值，否則函數(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)用多個Ajax請求，請注意Ajax請求是否可以同時進(jìn)行，如果可以應(yīng)該使用when()函數(shù)來同時執(zhí)行，以提高程序的運(yùn)行效率和可讀性。
  • deferred對象有一個方法promise()，可以阻止其他代碼修改deferred對象的狀態(tài)，也就是其他代碼調(diào)用reslove()和reject()無效。
var dtd = $.Deferred(); // 新建一個Deferred對象
var wait = function(dtd){
  var tasks = function(){
    alert("執(zhí)行完畢！");
    dtd.resolve(); // 改變Deferred對象的執(zhí)行狀態(tài)
  };
  setTimeout(tasks,5000);
  return dtd;
};
wait(dtd)
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出錯啦！"); });
dtd.resolve();  //這里修改了dtd對象的狀態(tài)，導(dǎo)致立刻出現(xiàn)“成功了！”的提示

正確的例子：

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

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

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

function loadComponent(id){
  var dtd = $.Deferred();
  //loadScript將異步加載一個js文件，所以返回值是一個Deffered對象
  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對象，才能保證返回值的done回調(diào)在load事件完成后執(zhí)行
  return dtd;
}

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

/* 這個函數(shù)返回一個異步對象，當(dāng)異步對象執(zhí)行done時，表示component被加載完成 */
function requireComponent(id){
  if (this.components[id]){
    //如果component已經(jīng)被加載，直接返回一個reslove的異步對象，否則返回值內(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異步模型有一個缺點(diǎn)，就是缺乏類似wait操作的處理能力，如果多個異步調(diào)用要順序發(fā)生時，就要在done里面嵌套處理，影響代碼可讀性.
aSyncTask1.done( function () {
  //...第一個操作完成后的處理
  asyncTask2.done( function () {
    //...第二個操作完成后的處理
    asyncTask3.done( function () {
      //...第三個操作完成后的處理
    });
  })
})

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手