jquery管理ajax非同步 deferred物件

2022-01-17 17:59:36 字數 2808 閱讀 4055

今天跟大家分享乙個jquery中的物件-deferred。其實早在jquery1.5.0版本中就已經引入這個物件了。不過可能在實際開發過程中用到的並不多,所以沒有太在意。

這裡先不說deferred的概念,我們先看乙個例子。

還記得初學的時候,遇到乙個例項,先是要ajax請求乙個介面(a.json),從返回的資料中獲得乙個id1值。然後再請求乙個介面(b.json)獲得id2,最後需要對這兩個id值同時進行操作。

那個時候初學,首先想到的方案(現在想想,很傻很天真...)

var id1, id2;

$.ajax(

});$.ajax(

})alert('id1='+id1+','+ 'id2='+ id2);

因為那個時候,還沒有理解非同步的概念,所以以為,第二次ajax的時候id已經有值了,但是執行之後才發現,變數id其實根本沒被賦值。想要測試上面**,點這裡

也就是這一刻,我真正明白了:ajax是非同步的!!!

發現上面那個方法不能用之後,分析了一下,彈出undefined是因為彈出之前id還沒有被賦值,那我保證在彈出之前給id賦值不就解決了嗎?好的,於是我想到了下面這個方法:

var id1;    

$.ajax(

});}

})

想要測試上面**,點這裡

邏輯雖然正確了,但總覺得怪怪的,如果這裡需要巢狀3層呢?4層呢?。。。ajax裡面巢狀ajax,如果資料很多,訪問速度慢,巢狀更多層,會導致效能下降、影響使用者體驗、**不好維護等等問題。所以一般不推薦這種方法。總之,這種寫法讓我難以接受。

deferred是jquery中的擴充套件的乙個物件(1.5.0以上的版本支援deferred)。defer的意思是"延遲",所以deferred物件的含義就是"延遲"到未來某個點再執行。

簡單說,deferred物件就是jquery的**函式解決方案。

再簡單說,deferred物件用來管理非同步操作,而ajax就是一種非同步操作。

deferred讓ajax支援新的寫法,**如下:

$.ajax()

.done(function() )

.fail(function() )

想要測試上面**,點這裡

done函式就是ajax請求成功的回到函式;

fail函式就是ajax請求失敗的**函式。

var ajax1 = $.ajax();

var ajax2 = $.ajax();

$.when(ajax1,ajax2).done(function(d1,d2)).fail(function());

值得一提的是,上面**中done函式的引數,對應的是前面每乙個ajax請求返回的資料

想要測試上面**,點這裡

上面的**中,用到了deferred物件的when方法。

它的描述是:

提供一種方法來執行乙個或多個物件的**函式。

這裡的ajax1和ajax2就是deferred物件,done和fail就是**函式。上面**的意思是:

只有當兩個ajax請求都成功返回資料時,執行done函式;只要有乙個請求不成功,就執行fail函式。

另外值得一提的是:$.when方法的引數,只支援deferred物件,而ajax返回的就是deferred物件。`

這就已經實現了上面的需求了。請求兩個介面,獲得兩個資料,都成功時,對這兩個資料同時進行處理。而且這種鏈式寫法,讓讀者一目了然,而且便於維護擴充套件。

deferred物件執行**函式之前會有乙個執行狀態的存在,執行狀態一共有三種———未完成、已完成和已失敗。

未完成狀態,則會繼續等待,或者執行progress()指定的**函式。

已完成狀態,則會執行done()方法指定的**函式。

已失敗狀態,則會執行fail()方法指定的**函式。

所以這裡的deferred.resolve()方法就是手動將deferred物件的狀態改為已完成,繼而執行done方法;deferred.reject()方法就是手動將狀態改為已失敗,繼而執行fail方法。

下面來看乙個例子:

var defer = $.deferred(); // 新建乙個deferred物件

var wait = function(defer);

settimeout(tasks,5000);

return defer;

};$.when(wait(defer))

.done(function())

.fail(function());

想要測試上面**,點這裡

結果:等待5秒鐘,先彈出「succeed」,在彈出「執行完畢!」。

分析一下**執行過程:

$.when()裡面的引數是wait函式,也就是乙個deferred物件,所以可以繼續執行settimeout函式,等待5s,執行tasks函式,然後手動改變了狀態為「已完成」,所以執行done方法,彈出「succeed」,然後彈出「執行完畢!」。

deferred物件通過對乙個ajax請求的各種**函式的控制,讓jquery寫ajax變的簡單、容易維護、容易擴充套件。

jQuery的AJax非同步載入

主要用到load 方法以及getscript 方法,具體以乙個例子說明 在現有html檔案中載入乙個擬好的片段,以及在片段載入完成之前阻止使用者進一步操作的彈出框。首先是現有html 無任何內容 ajax非同步載入title script script head body html 擬乙個js檔案g...

ajax的同步 非同步 jquery同步

同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。看下邊的js function 如果其它函式呼叫這個函式的時候我們會發現先alert last 之後再 alert msg msg 不是順序執行的,這是因為jquery ajax預設的是非同步的不等ajax執行完就繼續執行其餘 這樣的話...

jquery的ajax同步和非同步

之前一直在寫jquery 的時候遇到ajax載入資料都需要考慮 執行順序問題。最近的專案用了到ajax同步。這個同步的意思是當js 載入到當前ajax的時候會把頁面裡所有的 停止載入,頁面出去假死狀態,當這個ajax執行完畢後才會繼續執行其他 頁面假死狀態解除。而非同步則這個ajax 執行中的時候其...