2010-12-11 42 views
34

哪個在哪個時間使用。jquery :: ajaxStop()與jquery :: ajaxComplete()

在上http://api.jquery.com/文檔:

對於ajaxStop(),它說:

說明:註冊一個處理當所有Ajax請求已經完成被調用。這是一個Ajax事件。

而對於ajaxComplete(),它說:

說明:註冊一個處理程序被調用時,Ajax請求完成。這是一個Ajax事件。

從我所看到的ajaxComplete()更靈活,因爲:

所有ajaxComplete處理程序被調用,不管是什麼Ajax請求完成。如果我們必須區分這些請求,我們可以使用傳遞給處理程序的參數。每次執行ajaxComplete處理程序時,都會傳遞事件對象,XMLHttpRequest對象以及創建請求時使用的設置對象。

有人可以解釋每個是什麼和每個適當的用法。在我最近建立的應用程序中,當我的ajax調用完成時,我依靠ajaxStop()來觸發。然後我會解析返回的數據以獲得服務器端操作的結果。現在我開始懷疑我是否應該使用ajaxComplete()來替代,或者兩者的組合都適用於各種情況。

想法是讚賞。

+0

我想不通爲什麼我得到錯誤'ajaxComplete不是函數'。請務必不要使用'slim'版本的jQuery:https://stackoverflow.com/a/35424465/470749 – Ryan 2017-10-01 17:49:20

回答

54

那麼,簡短的版本是他們服務於不同的目的,所以答案將是「兩種情況的組合」選項。其基本規則是:

  • .ajaxComplete() - 運行於每個請求即完成,當你想要做的每個請求/結果的東西用這個。請注意,這不會替代success處理程序,因爲解析的數據不是參數之一(即使出現錯誤時它也會運行) - 您可能需要在某些每個請求情況下使用.ajaxSuccess()
  • .ajaxStop() - 運行時每一批請求的完成,通常你會結合.ajaxStart()用這個東西像顯示/隱藏「正在加載...」某種指標 - 或做別的事情一次一批AJAX請求結束了,就像主持人的最後一步一樣。

如果你想利用這個來解析您的數據,有可能是一個更好的辦法,在這種情況下$.ajaxSetup(),在那裏你可以指定一個success處理程序,獲取已解析的數據(例如JSON響應將是對象) ,像這樣:

$.ajaxSetup({ 
    success: function(data) { 
    //do something with data, for JSON it's already an object, etc. 
    } 
}); 
+0

我得到了ajax成功調用。何時應該使用ajaxStop而不是完整的。 – Chris 2010-12-12 10:22:42

+8

@Chris - '.ajaxStop()'當一批請求完成時觸發,這意味着如果你觸發5,無論它們返回什麼順序,當第5個完成時觸發,所以沒有AJAX請求等待結果在那一刻,你就完成了。這意味着它沒有關於完成的特定請求的任何信息,因爲它不是*用於請求,而是用於所有請求。 'ajaxComplete'激發*每個*請求,每個請求都有'XMLHttpRequest'對象......所以你有關於處理請求的一些信息......這一切都取決於你實際做了什麼以及哪些是合適的。 – 2010-12-12 10:25:45

+0

謝謝,這是有道理的。 – Chris 2010-12-12 12:29:55

7

ajaxComplete在ajax請求完成時調用,無論是成功執行還是發生錯誤。

ajaxStop被調用時全部 ajax請求完成。因此,與ajaxComplete不同,如果仍有請求正在進行,它將不會被調用。

如果您希望執行的操作應該爲每個ajax請求完成,您應該使用第一個。

3

一般而言,您要使用ajaxComplete。這是因爲ajaxStop只會在沒有更多的Ajax請求仍在等待返回時觸發。當您一次發送一個ajax請求時,這可能看起來並不一樣,但想象一下,發送請求A後網絡發生了減速,並且當請求B在5秒後發送時,它早於請求A返回。那麼ajaxStop只會在請求A返回後觸發一次,而ajaxComplete將兩次觸發。

您使用ajaxStop的情況是,您一次發送多個ajax請求...例如,提交一系列3種形式......並且希望在全部3個成功完成時得到通知。當然,你可以實現一個櫃檯內ajaxComplete

但是相同的功能,從你的問題的聲音......你想從每個Ajax響應分析數據......這通常會在完成ajax成功回調,例如

$.ajax({ 
    url: "blah", 
    data: "blah", 
    success: function (data) { /* Code in here */ } 
}); 
相關問題