Detaillierte Erläuterung der Funktion jQuery.ajaxStop()

Die

ajaxStop()-Funktion wird verwendet, um die Handlerfunktion für das ajaxStop -Ereignis der AJAX-Anfrage zu binden.

Dies ist eine globale AJAX-Ereignisfunktion, die zum Ausführen der gebundenen Ereignisverarbeitung-Funktion verwendet wird, wenn das ajaxStop-Ereignis ausgelöst wird.

Beschreibung der offiziellen jQuery-Dokumentation: Immer wenn eine AJAX-Anfrage abgeschlossen ist (ob erfolgreich oder fehlgeschlagen), prüft jQuery, ob andere aktive (unvollendete) AJAX-Anfragen vorhanden sind. Wenn im Prozess keine anderen aktiven AJAX-Anfragen gefunden werden, löst jQuery das ajaxStop-Ereignis aus. Zu diesem Zeitpunkt werden alle über die Funktion ajaxStop() gebundenen Ereignisbehandlungsfunktionen ausgeführt.

Kurz gesagt: Wenn eine AJAX-Anfrage endet und zu diesem Zeitpunkt keine anderen aktiven AJAX-Anfragen vorhanden sind, löst die Anfrage das AjaxStop-Ereignis aus.

Wenn mehrere AJAX-Anfragen kontinuierlich ausgeführt werden, löst im Allgemeinen nur die letzte abgeschlossene AJAX-Anfrage das AjaxStop-Ereignis aus. Nachdem alle AJAX-Anfragen ausgeführt wurden, werden mehrere AJAX-Anfragen kontinuierlich ausgeführt, oder nur die letzte abgeschlossene AJAX-Anfrage löst das AjaxStop-Ereignis aus.

Wenn es einer AJAX-Anfrage verboten ist, globale AJAX-Ereignisse auszulösen, wird sie nicht als aktive AJAX-Anfrage betrachtet.

Diese Funktion muss für die jQuery-Objektinstanz aufgerufen werden und ajaxStop() bindet einen Ereignishandler an jedes übereinstimmende Element. Wenn das Ereignis ajaxStop ausgelöst wird, werden die an alle übereinstimmenden Elemente gebundenen Handlerfunktionen aufgerufen. Dies innerhalb des Ereignishandlers zeigt auf das aktuelle DOM-Element.

Sie können diese Funktion mehrmals für dasselbe Element aufrufen, um mehrere Ereignishandler zu binden. Wenn ein Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Ab jQuery 1.8 kann diese Funktion Ereignishandler nur an Dokumentobjekte binden, und an andere Elemente gebundene Ereignishandler funktionieren nicht.

Wenn Sie den Optionsparameter global in jQuery.ajax() oder jQuery.ajaxSetup() auf false setzen, können Sie verhindern, dass die AJAX-Anfrage globale AJAX-Ereignisse auslöst.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion ist neu in jQuery 1.0.

jQueryObject.ajaxStop( handler)

Parameter

Parameterbeschreibung

Handler Funktionstyp muss bei diesem Ereignis ausgeführt werden Die Ereignisbehandlungsfunktion wird ausgelöst.

Rückgabewert

ajaxStop()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiele und Beschreibung

Für das AjaxStop-Ereignis und den Auslösemechanismus des AjaxStop-Ereignisses können Sie auf einen Teil des Quellcodes der jQuery.ajax()-Funktion von jQuery verweisen.

Durch den folgenden Quellcode können wir wissen: jQuery zählt die Anzahl der aktuell aktiven AJAX-Anfragen. Immer wenn eine AJAX-Anfrage gestartet wird, wird die aktive Zahl um 1 erhöht; immer wenn eine AJAX-Anfrage abgeschlossen wird, wird die aktive Zahl um 1 verringert. Wenn die aktive Zahl 0 ist, wenn eine AJAX-Anfrage beginnt, wird das Ereignis ajaxStart ausgelöst; wenn die aktive Zahl 0 ist, wenn eine AJAX-Anfrage endet, wird das Ereignis ajaxStop ausgelöst.

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

Bitte beachten Sie den folgenden HTML-Beispielcode:

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

Das Folgende ist der jQuery-Beispielcode für die Funktion ajaxStop(), um die spezifische Verwendung von ajaxStop( )-Funktion:

Bitte beachten Sie: Die AJAX-Anfrage, die zuerst ausgeführt wird, wird nicht unbedingt zuerst beendet. Dies hängt eng mit dem Netzwerk, dem Datenvolumen und der zugehörigen Codeausführungszeit während des gesamten AJAX-Anfrageprozesses zusammen. Im folgenden Beispielcode wird zur Vereinfachung der Erklärung davon ausgegangen, dass alle AJAX-Anfragen gleich lange dauern.

Bitte führen Sie den folgenden Code basierend auf jQuery-Versionen vor 1.8 aus.

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

Wenn die aktuelle jQuery Version 1.8 und höher ist, wird das Dialogfeld mit dem obigen jQuery-Code nicht angezeigt. Denn ab jQuery 1.8 muss die Handlerfunktion des AjaxStop-Ereignisses an das Dokumentobjekt gebunden werden, um wirksam zu werden.

Daher sollten wir unabhängig von der aktuellen jQuery-Version, wenn keine besonderen Anforderungen bestehen, den AjaxStop-Ereignishandler an das Dokumentobjekt binden.

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

Nun beziehen wir uns auf den folgenden jQuery-Code. Wir verzögern die Ausführung der zweiten AJAX-Anfrage um 3 Sekunden (oder einen anderen Zeitwert, der den Abschluss der ersten AJAX-Anfrage sicherstellen kann). Zu diesem Zeitpunkt werden bei beiden AJAX-Anfragen Dialogfelder angezeigt.

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

Wenn die zweite AJAX-Anfrage daran gehindert wird, globale AJAX-Ereignisse auszulösen, wird sie nicht als aktive AJAX-Anfrage betrachtet. Die erste AJAX-Anfrage löst das ajaxStop-Ereignis aus.

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktion jQuery.ajaxStop(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!