Désactiver ajaxStart() et ajaxStop() pour une requête spécifique

Question

J'utilise .ajaxStart() et .ajaxStop() pour afficher une modale pendant l'exécution d'une requête ajax. (entre le démarrage et l'arrêt)

J'aimerais maintenant ajouter une fonction de sondage long qui attend les notifications, semblable à celle qui se trouve dans le coin supérieur gauche de ce site.

Mon problème est maintenant de désactiver cette modale uniquement pour la demande de longpolling

Enregistrement des gestionnaires d'activation et de désactivation de l'"écran de chargement" :

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

Ma fonction longpoll :

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

J'ai essayé :

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

et en rattachant les gestionnaires après avoir lancé l'interrogation, mais sans succès.

J'ai également essayé d'introduire une variable globale dans handleAjaxStart() qui reviendrait à la première ligne de la fonction, mais cela semble tuer complètement l'écran de chargement.

Avez-vous une idée de la manière dont cela peut être réalisé ?

Answer 1

J'ai compris

Il y a un attribut dans l'objet options .ajax() les prises appelées global .

S'il est réglé sur false, il ne déclenchera pas la fonction ajaxStart pour l'appel.

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

Answer 2

Après avoir lu toutes les solutions possibles, je veux combiner les réponses.

Solution 1 : Lier/Débrancher

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

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

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

Il s'agit d'une solution dépréciée. Avant jQuery 1.9, les événements globaux d'ajax comme ajaxStart, ajaxStop, ajaxError etc. peuvent être liés à n'importe quel élément. Après jQuery 1.9 :

À partir de jQuery 1.9, tous les gestionnaires des événements Ajax globaux de jQuery, y compris ceux ajoutés avec la méthode .ajaxStart(), doivent être rattachés au document.

Nous ne pouvons donc pas lier ou délier ces événements à des espaces de noms personnalisés.

Solution 2 : Définissez la propriété global à false

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

Cette solution permet de désactiver ajaxStart()/ajaxStop() événement(s). Cependant, cela permet également de désactiver ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess() . Si vous n'utilisez pas ces événements globaux, cela semble correct, mais lorsque cela s'avère nécessaire, vous devez revenir et modifier votre solution pour toutes les pages où vous avez mis global: false .

Solution 3 : Utilisez une variable globale

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

Les variables globales ne doivent pas être utilisées dans les fichiers javascript. Cependant, c'est la solution la plus simple que j'ai pu trouver.

J'ai préféré la troisième solution pour mon projet.