jQuery.ajaxStop() 函數詳解

ajaxStop()函數用於AJAX請求的ajaxStop事件綁定處理函數。

這是一個全域AJAX事件函數，用於在ajaxStop事件被觸發時執行綁定的事件處理函數。

jQuery官方文件描述：無論什麼時候，當一個AJAX請求完成(無論成功或失敗)時，jQuery會檢查當前是否還有其他活躍的(未完成的)AJAX請求。如果在進程中沒有找到其他活躍的AJAX請求，jQuery就會觸發ajaxStop事件。此時，透過ajaxStop()函數綁定的所有事件處理函數都將被執行。

簡而言之，當一個AJAX請求結束的時候，此時沒有其他活躍的AJAX請求，該請求就會觸發ajaxStop事件。

一般而言，連續執行多個AJAX請求，只有其中最後一個結束的AJAX請求會觸發ajaxStop事件。等到所有AJAX請求執行完畢後，再次連續執行多個AJAX請求，還是只有其中最後一個結束的AJAX請求會觸發ajaxStop事件。

如果某個AJAX請求被禁止觸發全域AJAX事件，則它不會被視為活躍的AJAX請求。

該函數必須在jQuery物件實例上調用，ajaxStop()將為每個匹配元素綁定事件處理函數。當ajaxStop事件被觸發時，所有符合元素上綁定的處理函數都會被呼叫。事件處理函數內的this將指向目前DOM元素。

你可以為相同元素多次呼叫函數，從而綁定多個事件處理函數。觸發事件時，jQuery會依照綁定的先後順序依序執行綁定的事件處理函數。

從jQuery 1.8開始，函數只能為document物件綁定事件處理函數，為其他元素綁定的事件處理函數不會運作。

如果在jQuery.ajax()或jQuery.ajaxSetup()中將選項參數global設為false，可以禁止該AJAX請求觸發全域的AJAX事件。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.0 新增此函數。

jQueryObject.ajaxStop( handler )

#參數

參數 說明

handler Function類型觸發事件時，需要執行的事件處理函數。

傳回值

ajaxStop()函數的回傳值為jQuery類型，傳回目前jQuery物件本身。

範例&說明

關於ajaxStop事件和ajaxStop事件的觸發機制，你可以參考jQuery的jQuery.ajax()函數的部分原始碼。

透過以下原始碼，我們可以知道：jQuery會統計目前活躍的AJAX請求數。每當開始執行一個AJAX請求時，會在活躍數上加1；每當一個AJAX請求結束時，就在活躍數上減1。如果一個AJAX請求開始時，活躍數為0，則觸發ajaxStart事件；如果一個AJAX請求結束時，活躍數為0，則觸發ajaxStop事件。

// jQuery.ajax()函数的开头部分
var fireGlobals = s.global; // 是否允许触发全局AJAX事件
// 如果允许触发全局AJAX事件，并且活跃的AJAX请求数为0，则触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
    jQuery.event.trigger("ajaxStart");
}
// ... 省略中间的源代码
// jQuery.ajax()函数的末尾部分
if ( fireGlobals ) {
    globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
    // 如果允许触发全局事件，并且活跃的AJAX请求数为0，则触发ajaxStop事件
    if ( !( --jQuery.active ) ) {
        jQuery.event.trigger("ajaxStop");
    }
}

請參考以下HTML範例程式碼：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

以下是與ajaxStop()函數相關的jQuery範例程式碼，以示範ajaxStop()函數的具體用法：

請注意：並不是先執行的AJAX請求就一定先結束，這與整個AJAX請求過程中的網路、資料量、相關程式碼執行時間等方面密切相關。下面的範例程式碼均假設所有AJAX請求的用時相同，以便於解釋說明。

以下程式碼請基於1.8之前版本的jQuery來運行。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1：当前元素id为" + this.id );
} );
$divs.ajaxStop( function(){
    alert("处理函数2：当前元素id为" + this.id );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，下一个AJAX请求正在执行，因此不会触发ajaxStop事件，也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时，上一个AJAX请求已经执行完毕，因此会触发ajaxStop事件
    // 它会弹出6次对话框 ，因为当前页面有3个div元素，我们为每个div元素绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

如果目前jQuery為1.8以上版本，上述jQuery程式碼不會跳出對話框。因為從jQuery 1.8開始，ajaxStop事件的處理函數必須綁定到document物件上才能生效。

因此，不論當前jQuery為何版本，如果不是特殊需求，我們都應該將ajaxStop事件的處理函數綁定到document物件上。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1");
} );
$divs.ajaxStop( function(){
    alert("处理函数2");
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，下一个AJAX请求正在执行，因此不会触发ajaxStop事件，也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时，上一个AJAX请求已经执行完毕，因此会触发ajaxStop事件
    // 它会弹出2次对话框 ，因为我们为document绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

現在，我們參考以下jQuery程式碼。我們將第二個AJAX請求延遲3秒執行(或其他能保證第一個AJAX請求執行完畢的時間值)，此時兩個AJAX請求都會彈出對話框。

var $doc = $( document );
$doc.ajaxStop( function(){
    alert("处理函数1" );
} );
$doc.ajaxStop( function(){
    alert("处理函数2" );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(下一个请求尚未执行)，因此会触发ajaxStop事件
    // 它会弹出2次对话框
    $.ajax( { url: "index.html" } );
    // 延迟3秒执行第二个AJAX请求
    setTimeout( function(){
        
        // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(上一个请求早已经执行完毕)
        // 因此会触发ajaxStop事件，会弹出2次对话框
        $.ajax( { url: "myurl.php" } );
        
    }, 3000);   
    
} );

如果第二個AJAX請求被禁止觸發全域AJAX事件，則它不會被視為活躍的AJAX請求。第一個AJAX請求會觸發ajaxStop事件。

var $doc = $( document );
$doc.ajaxStop( function(){
    alert("处理函数1" );
} );
$doc.ajaxStop( function(){
    alert("处理函数2" );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求开始时，此时没有其他活跃的AJAX请求(下一个请求虽然尚未执行完成，但它被禁止触发全局AJAX事件，jQuery在检查活跃请求时会忽略掉它)
    // 因此会触发ajaxStop事件，会弹出2次对话框
    $.ajax( { url: "index.html" } );
    
    // 该AJAX请求开始时，此时没有其他活跃的AJAX请求，但它不会触发ajaxStop事件
    // 因为它的global选项为false，被禁止触发任何AJAX事件，所以它不会弹出对话框
    $.ajax( { 
        url: "myurl.php" ,
        global: false // 禁止触发全局AJAX事件
    } );
    
} );

以上是jQuery.ajaxStop() 函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！