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() 函数详解的详细内容，更多请关注其它相关文章！