Wie .ajaxStart() auf bestimmten Ajax-Aufrufe auf

Question

ich auf dem Dokument einer Website einige Ajax-Aufrufe, die einen Fortschrittsbalken in Abhängigkeit von dem Ajax-Status anzeigen oder ausblenden

$(document).ajaxStart(function(){ 
     $('#ajaxProgress').show(); 
    }); 
    $(document).ajaxStop(function(){ 
     $('#ajaxProgress').hide(); 
    }); 

Ich mag im Grunde overwirte Diese Methoden auf anderen Teilen der Website, wo viele schnelle kleine Ajax-Aufrufe gemacht werden und brauchen nicht den Fortschrittsbalken hinein und heraus. Ich versuche, sie an andere $ .getJSON und $ .ajax Aufrufe anzuhängen oder einzufügen. Ich habe versucht, sie zu verketten, aber anscheinend ist das nicht gut.

$.getJSON().ajaxStart(function(){ 'kill preloader'}); 

Answer 1

Sie können die ajaxStart und ajaxStop mit benutzerdefinierten Namespace binden:

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

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

Dann in anderen Teilen der Website, die Sie vorübergehend freibleibend sie vor werde Ihre .json ruft:

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

die Idee von here Got während Suche nach einer Antwort.

EDIT: Ich hatte keine Zeit, es zu testen, leider.

Answer 2

Leider hat ajaxStart Veranstaltung hat keine weiteren Informationen, die Sie verwenden können, um zu entscheiden, ob die Animation zeigen oder nicht.

Wie auch immer, hier ist eine Idee. Warum starten Sie die Animation in Ihrer ajaxStart-Methode nicht nach etwa 200 Millisekunden? Wenn Ajax-Anforderungen in 200 Millisekunden abgeschlossen werden, zeigen Sie keine Animation an, andernfalls zeigen Sie die Animation an. Code kann etwas wie folgt aussehen:

var animationController = function animationController() 
{ 
    var timeout = null; 
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts. 

    var pub = {}; 

    var actualAnimationStart = function actualAnimationStart() 
    { 
     $('#ajaxProgress').show(); 
    }; 

    var actualAnimationStop = function actualAnimationStop() 
    { 
     $('#ajaxProgress').hide(); 
    }; 

    pub.startAnimation = function animationController$startAnimation() 
    { 
     timeout = setTimeout(actualAnimationStart, delayBy); 
    }; 

    pub.stopAnimation = function animationController$stopAnimation() 
    { 
     //If ajax call finishes before the timeout occurs, we wouldn't have 
     //shown any animation. 
     clearTimeout(timeout); 
     actualAnimationStop(); 
    } 

    return pub; 
}(); 


$(document).ready(
    function() 
    { 
     $(document).ajaxStart(animationController.startAnimation); 
     $(document).ajaxStop(animationController.stopAnimation); 
    } 
); 

Answer 3

Wenn Sie diese in deiner Funktion, die eine Ajax-Aktion behandelt bindet sich, es wird nur bei Bedarf:

$('#yourDiv') 
    .ajaxStart(function(){ 
     $("ResultsDiv").hide(); 
     $(this).show(); 
    }) 
    .ajaxStop(function(){ 
     $(this).hide(); 
     $(this).unbind("ajaxStart"); 
    }); 

Answer 4

Außerdem, wenn Sie auf deaktivieren Anrufe .ajaxStart() und .ajaxStop() möchten, können Sie einstellen, global Option false in Ihren .ajax() Anfragen;)

mehr Siehe hier: How to call .ajaxStart() on specific ajax calls

Answer 5

Verwenden Sie ajaxSend und ajaxComplete, wenn Sie die Anfrage interspieren möchten, bevor Sie entscheiden, was zu tun ist. Siehe meine Antwort hier: https://stackoverflow.com/a/15763341/117268

Answer 6

<div class="Local">Trigger</div> 

<div class="result"></div> 
<div class="log"></div> 

$(document).ajaxStart(function() { 
$("log")text("Trigger Fire successfully."); 
}); 

$(".local").click(function() { 
$(".result").load("c:/refresh.html."); 
}); 

Gerade Gehen Sie durch dieses Beispiel Sie einige idea.When erhalten die Benutzer klickt auf das Element mit der Klasse Lokale und die Ajax-Anfrage gesendet wird, wird die Protokollmeldung angezeigt.

Answer 7

Ich habe eine Lösung. Ich legte eine globale js-Variable namens showloader (standardmäßig als false festgelegt). In jeder der Funktionen, die Sie den Loader anzeigen möchten, setzen Sie ihn einfach auf "True", bevor Sie den Ajax-Aufruf durchführen.

function doAjaxThing() 
{ 
    showloader=true; 
    $.ajax({yaddayadda}); 
} 

Dann habe ich folgendes in meinem Kopfabschnitt;

$(document).ajaxStart(function() 
{ 
    if (showloader) 
    { 
     $('.loadingholder').fadeIn(200); 
    } 
});  

$(document).ajaxComplete(function() 
{ 
    $('.loadingholder').fadeOut(200); 
    showloader=false; 
}); 

Answer 8

Verwendung beforeSend oder komplette Callback-Funktionen in Ajax-Aufruf wie auf diese Weise ..... Live-Beispiel ist hier https://stackoverflow.com/a/34940340/5361795

Quelle ShoutingCode

Answer 9

Verwenden local scoped Ajax Events

   success: function (jQxhr, errorCode, errorThrown) { 
        alert("Error : " + errorThrown); 
       }, 
       beforeSend: function() { 
        $("#loading-image").show(); 
       }, 
       complete: function() { 
        $("#loading-image").hide(); 
       } 

Answer 10

Es gibt ein Attribut im Optionsobjekt. Ajax() wird als global bezeichnet.

Wenn dieser Wert auf "false" gesetzt ist, wird das Ereignis "ajaxStart" für den Aufruf nicht ausgelöst.

$.ajax({ 
     url: "google.com", 
     type: "GET", 
     dataType: "json", 
     cache: false, 
     global: false, 
     success: function (data) {