溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了javascript異步處理與Jquery deferred對象用法。分享給大家供大家參考，具體如下：
這是項目組老大整理的一些關于jquery 異步處理請求，以及使用 jquery deferred 對象的一些常見方法。雖然是項目上總結出來的。但也比較通用，分享在這里。
$.Ajax函數的返回值不代表返回的結果，只是一個Deffered對象。done(), fail(), always()函數來執行。例如：
function readData(){
$.ajax({ url:"test", dataType:"json" })
.done(function() {
//....
});
}
readData();
//...這里想添加一些后續處理，但程序將在Ajax回調前執行，所以無法達到預期目的
正確的代碼：
function readData(){
return $.ajax({ url:"test", dataType:"json" })
.done(function() {
//....
});
}
readData().done(function () {
//...想添加的后續處理可以加在這里處理
});
when()函數來同時執行，以提高程序的運行效率和可讀性。promise()，可以阻止其他代碼修改deferred對象的狀態，也就是其他代碼調用reslove()和reject()無效。
var dtd = $.Deferred(); // 新建一個Deferred對象
var wait = function(dtd){
var tasks = function(){
alert("執行完畢！");
dtd.resolve(); // 改變Deferred對象的執行狀態
};
setTimeout(tasks,5000);
return dtd;
};
wait(dtd)
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出錯啦！"); });
dtd.resolve(); //這里修改了dtd對象的狀態，導致立刻出現“成功了！”的提示
正確的例子：
var dtd = $.Deferred(); // 新建一個Deferred對象
var wait = function(dtd){
var tasks = function(){
alert("執行完畢！");
dtd.resolve(); // 改變Deferred對象的執行狀態
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise對象
};
wait(dtd)
.done(function(){ alert("成功了！"); })
.fail(function(){ alert("出錯啦！"); });
dtd.resolve(); //這里修改dtd對象的狀態無效
1.嵌套異步操作的處理。
如果一個函數內部執行異步任務，并且在異步任務的done回調內會嵌套另一個異步任務，那么簡單返回第一個異步任務的返回值是不行的，需要另外自行定義一個Deferred對象作為返回值。
function loadComponent(id){
var dtd = $.Deferred();
//loadScript將異步加載一個js文件，所以返回值是一個Deffered對象
return loadScript(id)
.done(function() {
//js加載后，觸發component的load事件，此事件內將使用Ajax獲取頁面模板和數據，生成最終的html
app.getComponent(id).trigger("load")
.done( function(){
dtd.reslove(agruments);
}).fail( function(){
dtd.reject(agruments);
});
});
//返回自定義的dtd對象，才能保證返回值的done回調在load事件完成后執行
return dtd;
}
2.一個函數內同時包含同步和異步case的處理。
/* 這個函數返回一個異步對象，當異步對象執行done時，表示component被加載完成 */
function requireComponent(id){
if (this.components[id]){
//如果component已經被加載，直接返回一個reslove的異步對象，否則返回值內容與else分支不同，后續代碼難以處理
var dtd = $.Deferred();
dtd.reslove(this.getComponent(id));
return dtd;
}
else{
//如果component未被加載，loadScript將異步加載JavaScript并執行，然后將被加載的component放入this.components
return loadScript(id);
}
}
wait操作的處理能力，如果多個異步調用要順序發生時，就要在done里面嵌套處理，影響代碼可讀性.
aSyncTask1.done( function () {
//...第一個操作完成后的處理
asyncTask2.done( function () {
//...第二個操作完成后的處理
asyncTask3.done( function () {
//...第三個操作完成后的處理
});
})
})
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery文件與目錄操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery擴展技巧總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
