全局Ajax事件處理程序：.ajaxStop()

詳細內容
分類：JQuery
發佈：2013-08-16, 週五 23:26
點擊數：2130

(PS:這篇文章是官網API文件的非專業翻譯+個人意見，並且重新排版過)

全局Ajax事件處理程序：.ajaxStop()

註冊一個處理程序，當所有的Ajax要求都已經完成時，該處理程序會被呼叫。 這是一個Ajax事件(AjaxEvent)。

.ajaxStop( handler() )    // version added: 1.0
  • handler()
    Type: Function()
    The function to be invoked.

當一個Ajax要求完成時，jQuery會檢查是否還有其他尚未完成的Ajax要求。如果沒有，jQuery就會觸發ajaxStop事件，此時，每個用.ajaxStop()註冊的處理程序都會被執行。除此之外，若是最後一個未完成的Ajax要求被beforeSend 回呼函式傳回的false 取消，ajaxStop事件也會被觸發。

為了實際觀察這個方法，我們建立了一個基本的Ajax載入要求：

<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

將下面的事件處理器附加到文件上：

$( document).ajaxStop(function() {
  $( ".log").text( "Triggered ajaxStop handler." ); 
});
/*下面是官網原始的程式碼，不過這似乎不符合他自己說的，
只能添加在document上(從1.8版開始，事實上下面程式碼在1.91版確實也無法運作，
所以我把程式碼做了修改)
$( ".log" ).ajaxStop(function() {
  $( this ).text( "Triggered ajaxStop handler." ); 
});
*/

現在，用jQuery方法來建立一個Ajax要求：

$( ".trigger" ).click(function() { 
  $( ".result" ).load( "ajax/test.html" ); 
})

當使用者按下具有trigger類別的元素時，Ajax要求會完成，log 訊息就會出現。

從jQuery1.8開始，.ajaxStop()方法應該只被附加到document上。

其他注意事項：

  • 假如$.ajax()或是$.ajaxSetup()在呼叫時設定global選項為false，那.ajaxStop()方法將不會被觸發。

範例：

在所有Ajax要求停止時，隱藏載入訊息。

	$( document ).ajaxStop(function() {
  $( "#loading" ).hide();
});
 
 

  按個讚!~支持本站!~

FB推薦載入中