Deaktivieren Sie ajaxStart () und ajaxStop () für eine bestimmte Anforderung

77

Ich verwende .ajaxStart () und .ajaxStop (), um ein Modal anzuzeigen, während eine Ajax-Anfrage gestellt wird. (zwischen Start und Stopp)

Jetzt möchte ich eine Longpoll-Funktion hinzufügen, die auf Benachrichtigungen wartet, ähnlich der in der linken oberen Ecke dieser Site.

Mein Problem liegt nun darin, dieses Modal nur für die Longpolling-Anfrage zu deaktivieren.

Ein- und Ausschalten von "Ladebildschirm" -Handlern:

$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);

Meine Longpoll-Funktion:

$.ajax({
    timeout: 35000,
    url: longPollUrl,
    success: function(data){
        if(data.queCount) $('#numQueCount').html(data.queCount);
        if(data.queAccept) $('#numQueAccept').html(data.queAccept);
    }, 
    dataType: 'json',
    complete: longpoll
});

Ich habe es versucht:

$().off('ajaxStart');
$().off('ajaxStop');

..und die Handler nach dem Start der Umfrage wieder anbringen, aber keine Freude.

Ich habe auch versucht, eine globale Variable einzuführen handleAjaxStart(), die in der ersten Zeile der Funktion zurückgegeben wird, aber das scheint den Ladebildschirm vollständig zu zerstören.

Irgendwelche Ideen, wie dies erreicht werden kann?

ajax jquery long-polling Gung Foo
quelle

Antworten:

189

Ich habe es herausgefunden..

Es gibt ein Attribut in den .ajax()aufgerufenen Optionsobjekten global.

Wenn der Wert auf false gesetzt ist, wird das ajaxStartEreignis für den Aufruf nicht ausgelöst .

$.ajax({
    timeout: 35000,
    url: longPollUrl,
    success: function(data){
        if(data.queCount) $('#numQueCount').html(data.queCount);
        if(data.queAccept) $('#numQueAccept').html(data.queAccept);
    }, 
    global: false,     // this makes sure ajaxStart is not triggered
    dataType: 'json',
    complete: longpoll
});
Gung Foo
quelle
4
Sehr froh, dass sie an genau dieses Szenario gedacht haben, dass wir diese Catch-All-Ajax-Funktionen umgehen müssten. Wenn Sie global auf false setzen, werden alle globalen Trigger unterdrückt: ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess()nicht nur Start und Stop.
XstiX
14

Nachdem ich alle möglichen Lösungen gelesen habe, möchte ich die Antworten kombinieren.

Lösung 1: Binden / Entbinden

//binding
$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

//Unbinding
$(document).unbind(".mine");

Es ist eine abgeschriebene Lösung. Vor jQuery 1.9 können globale Ereignisse von Ajax wie AjaxStart, AjaxStop, AjaxError usw. an jedes Element gebunden werden. Nach jQuery 1.9:

Ab jQuery 1.9 müssen alle Handler für die globalen Ajax-Ereignisse von jQuery, einschließlich der mit der Methode .ajaxStart () hinzugefügten, an das Dokument angehängt werden.

Daher können wir diese Ereignisse nicht an benutzerdefinierte Namespaces binden / aufheben.

Lösung 2: Setzen Sie die Eigenschaft globalauffalse

$.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        global: false, //This is the key property.
        success: function (data) {
                   console.log(data);
                },
        error: function (data) {
                   console.log(data);
                }
       });

Diese Lösung deaktiviert ajaxStart()/ajaxStop()Ereignisse. Es macht jedoch auch deaktivieren ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess(). Wenn Sie diese globalen Ereignisse nicht verwenden, scheint dies in Ordnung zu sein. Wenn dies jedoch erforderlich ist, müssen Sie Ihre Lösung für alle von Ihnen festgelegten Seiten ändern global: false.

Lösung 3: Verwenden Sie eine globale Variable

var showLoadingEnabled = true;
$(document).ready(function () {
    $('#loading')
        .hide()  // at first, just hide it
        .ajaxStart(function () {
            if (showLoadingEnabled) {
                $(this).show();
            }
        })
        .ajaxStop(function () {
            if (showLoadingEnabled) {
                $(this).hide();
            }
        });
});


function justAnotherFunction() {
    window.showLoadingEnabled = false;
    $.ajax({
        url: 'www.google.com',
        type: 'GET',
        complete: function (data) {
            window.showLoadingEnabled = true;
            console.log(data);
        }
    });
}

Globale Variablen sollten nicht in Javascript-Dateien verwendet werden. Dies ist jedoch die einfachste Lösung, die ich finden kann.

Ich habe die dritte Lösung für mein Projekt vorgezogen.

ahmet
quelle