Explication détaillée de la fonction jQuery.ajaxStop()

La fonction

ajaxStop() est utilisée pour lier la fonction de gestionnaire pour l'événement ajaxStop de la requête AJAX.

Il s'agit d'une fonction d'événement AJAX globale, utilisée pour exécuter la fonction de traitement d'événement liée lorsque l'événement ajaxStop est déclenché.

Description de la documentation officielle de jQuery : chaque fois qu'une requête AJAX est terminée (qu'elle soit réussie ou échouée), jQuery vérifiera s'il existe d'autres requêtes AJAX actives (inachevées). Si aucune autre requête AJAX active n'est trouvée dans le processus, jQuery déclenchera l'événement ajaxStop. À ce stade, toutes les fonctions de gestion d'événements liées via la fonction ajaxStop() seront exécutées.

En bref, lorsqu'une requête AJAX se termine et qu'il n'y a aucune autre requête AJAX active à ce moment-là, la requête déclenchera l'événement ajaxStop.

De manière générale, lorsque plusieurs requêtes AJAX sont exécutées en continu, seule la dernière requête AJAX terminée déclenchera l'événement ajaxStop. Une fois toutes les requêtes AJAX exécutées, plusieurs requêtes AJAX sont exécutées en continu, ou seule la dernière requête AJAX terminée déclenchera l'événement ajaxStop.

S'il est interdit à une requête AJAX de déclencher des événements AJAX globaux, elle ne sera pas considérée comme une requête AJAX active.

Cette fonction doit être appelée sur l'instance d'objet jQuery, ajaxStop() liera la fonction de gestionnaire d'événements à chaque élément correspondant. Lorsque l'événement ajaxStop est déclenché, les fonctions de gestionnaire liées à tous les éléments correspondants seront appelées. Ceci dans le gestionnaire d'événements pointera vers l'élément DOM actuel.

Vous pouvez appeler cette fonction plusieurs fois pour le même élément afin de lier plusieurs gestionnaires d'événements. Lorsqu'un événement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

À partir de jQuery 1.8, cette fonction ne peut lier les gestionnaires d'événements qu'à des objets document, et les gestionnaires d'événements liés à d'autres éléments ne fonctionneront pas.

Si vous définissez le paramètre d'option global sur false dans jQuery.ajax() ou jQuery.ajaxSetup(), vous pouvez empêcher la requête AJAX de déclencher des événements AJAX globaux.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est nouvelle dans jQuery 1.0.

jQueryObject.ajaxStop( handler )

Paramètre

Description du paramètre

Le type de fonction Handler doit être exécuté lorsque cet événement est une fonction de gestion des événements déclenchée.

Valeur de retour

ajaxStop()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemples & Description

Pour l'événement ajaxStop et le mécanisme de déclenchement de l'événement ajaxStop, vous pouvez vous référer à une partie du code source de la fonction jQuery.ajax() de jQuery.

Grâce au code source suivant, nous pouvons le savoir : jQuery comptera le nombre de requêtes AJAX actuellement actives. Chaque fois qu'une requête AJAX est lancée, le numéro actif est incrémenté de 1 ; chaque fois qu'une requête AJAX est terminée, le numéro actif est décrémenté de 1. Si le numéro actif est 0 lorsqu'une requête AJAX démarre, l'événement ajaxStart est déclenché ; si le numéro actif est 0 lorsqu'une requête AJAX se termine, l'événement ajaxStop est déclenché.

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

Veuillez vous référer à l'exemple de code HTML suivant :

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

Ce qui suit est l'exemple de code jQuery lié à la fonction ajaxStop() pour démontrer l'utilisation spécifique de ajaxStop( ) fonction :

Veuillez noter : la requête AJAX exécutée en premier ne se terminera pas nécessairement en premier. Ceci est étroitement lié au réseau, au volume de données et au temps d'exécution du code associé pendant tout le processus de requête AJAX. L'exemple de code ci-dessous suppose que toutes les requêtes AJAX prennent le même temps pour faciliter l'explication.

Veuillez exécuter le code suivant basé sur les versions de jQuery antérieures à 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" } );
    
} );

Si le jQuery actuel est la version 1.8 ou supérieure, le code jQuery ci-dessus n'apparaîtra pas dans la boîte de dialogue. Car à partir de jQuery 1.8, la fonction de gestionnaire de l'événement ajaxStop doit être liée à l'objet document pour prendre effet.

Par conséquent, quelle que soit la version actuelle de jQuery, s'il n'y a pas de besoins particuliers, nous devons lier le gestionnaire d'événements ajaxStop à l'objet 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" } );
    
} );

Maintenant, nous nous référons au code jQuery suivant. Nous retarderons l'exécution de la deuxième requête AJAX de 3 secondes (ou une autre valeur de temps pouvant garantir l'achèvement de la première requête AJAX). À ce moment, les deux requêtes AJAX apparaîtront dans des boîtes de dialogue.

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

Si la deuxième requête AJAX est désactivée pour déclencher des événements AJAX globaux, elle ne sera pas considérée comme une requête AJAX active. La première requête AJAX déclenche l'événement 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事件
    } );
    
} );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!