Detailed explanation of jQuery.ajaxStop() function

ajaxStop()Function is used to bind the handler function for the ajaxStop event of the AJAX request.

This is a global AJAX event function, used to execute the bound event processing function when the ajaxStop event is triggered.

jQuery official documentation description: Whenever an AJAX request is completed (whether successful or failed), jQuery will check whether there are other active (unfinished) AJAX requests. If no other active AJAX requests are found in the process, jQuery will trigger the ajaxStop event. At this time, all event handling functions bound through the ajaxStop() function will be executed.

In short, when an AJAX request ends and there are no other active AJAX requests at this time, the request will trigger the ajaxStop event.

Generally speaking, when multiple AJAX requests are executed continuously, only the last completed AJAX request will trigger the ajaxStop event. After all AJAX requests are executed, multiple AJAX requests are executed continuously again, or only the last completed AJAX request will trigger the ajaxStop event.

If an AJAX request is prohibited from triggering global AJAX events, it will not be considered an active AJAX request.

This function must be called on the jQuery object instance, and ajaxStop() will bind an event handler to each matching element. When the ajaxStop event is triggered, the handler functions bound to all matching elements will be called. This within the event handler will point to the current DOM element.

You can call this function multiple times for the same element to bind multiple event handlers. When an event is triggered, jQuery will execute the bound event processing functions in the order of binding.

Starting from jQuery 1.8, this function can only bind event handlers to document objects, and event handlers bound to other elements will not work.

If you set the option parameter global to false in jQuery.ajax() or jQuery.ajaxSetup(), you can prevent the AJAX request from triggering global AJAX events.

This function belongs to the jQuery object (instance).

Syntax

This function is new in jQuery 1.0.

jQueryObject.ajaxStop( handler )

Parameter

Parameter Description

handler Function type needs to be executed when this event is triggered event handling function.

Return value

ajaxStop()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

For the ajaxStop event and the triggering mechanism of the ajaxStop event, you can refer to part of the source code of jQuery's jQuery.ajax() function.

Through the following source code, we can know: jQuery will count the number of currently active AJAX requests. Whenever an AJAX request is started, the active number is increased by 1; whenever an AJAX request is completed, the active number is decremented by 1. If the active number is 0 when an AJAX request starts, the ajaxStart event is triggered; if the active number is 0 when an AJAX request ends, the ajaxStop event is triggered.

// 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");
    }
}

Please refer to the following HTML sample code:

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

The following is the jQuery sample code related to the ajaxStop() function to demonstrate the specific usage of the ajaxStop() function:

Please note: The AJAX request that is executed first will not necessarily end first. This is closely related to the network, data volume, and related code execution time during the entire AJAX request process. The sample code below assumes that all AJAX requests take the same amount of time for ease of explanation.

Please run the following code based on jQuery versions prior to 1.8.

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" } );
    
} );

If the current jQuery is version 1.8 and above, the above jQuery code will not pop up the dialog box. Because starting from jQuery 1.8, the handler function of the ajaxStop event must be bound to the document object to take effect.

Therefore, regardless of the current jQuery version, if there are no special needs, we should bind the ajaxStop event handler to the document object.

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" } );
    
} );

Now, we refer to the following jQuery code. We will delay the execution of the second AJAX request for 3 seconds (or other time value that can ensure the completion of the first AJAX request). At this time, both AJAX requests will pop up dialog boxes.

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);   
    
} );

If the second AJAX request is prohibited from triggering global AJAX events, it will not be considered an active AJAX request. The first AJAX request triggers the ajaxStop event.

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事件
    } );
    
} );

The above is the detailed content of Detailed explanation of jQuery.ajaxStop() function. For more information, please follow other related articles on the PHP Chinese website!