Comment appeler .ajaxStart () sur des appels ajax spécifiques

J’ai des appels ajax sur le document d’un site qui affiche ou cache une barre de progression en fonction du statut ajax

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

Je voudrais essentiellement survoler ces méthodes sur d’autres parties du site où de petits appels ajax rapides sont faits et ne nécessitent pas que la barre de progression apparaisse et disparaisse. J’essaie de les joindre ou de les insérer dans d’autres appels $ .getJSON et $ .ajax. J’ai essayé de les enchaîner mais apparemment ce n’est pas bon.

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

Vous pouvez lier ajaxStart et ajaxStop en utilisant un espace de noms personnalisé:

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

Ensuite, dans d’autres parties du site, vous les déconnecterez temporairement avant que vos appels .json:

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

J’ai eu l’idée d’ ici en cherchant une réponse.

EDIT: je n’ai pas eu le temps de le tester, hélas.

Si vous mettez cela dans votre fonction qui gère une action ajax, elle ne se liera que lorsque cela est approprié:

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

Il y a un atsortingbut dans les options que l’object .ajax () prend appelé global .

S’il est défini sur false , l’événement ajaxStart ne sera pas déclenché pour l’appel.

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

De plus, si vous souhaitez désactiver les appels à .ajaxStart() et .ajaxStop() , vous pouvez définir global option global sur false dans vos .ajax() 😉

Voir plus ici: Comment appeler .ajaxStart () sur des appels ajax spécifiques

Utilisez les événements Ajax locaux

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

Malheureusement, l’événement ajaxStart ne dispose d’aucune information supplémentaire que vous pouvez utiliser pour décider d’afficher ou non l’animation.

En tout cas, voici une idée. Dans votre méthode ajaxStart, pourquoi ne pas lancer l’animation après 200 millisecondes? Si les requêtes ajax sont terminées en 200 millisecondes, aucune animation n’est affichée, sinon vous montrez l’animation. Code peut ressembler à quelque chose comme:

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

utiliser beforeSend ou compléter les fonctions de rappel dans l’appel ajax comme ceci ….. L’exemple en direct est ici https://stackoverflow.com/a/34940340/5361795

Code source source

J’ai une solution J’ai défini une variable globale js appelée showloader (définie par défaut sur false). Dans l’une des fonctions que vous souhaitez afficher, le chargeur doit simplement définir la valeur true avant de lancer l’appel ajax.

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

Ensuite, j’ai ce qui suit dans ma section de tête;

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

Utilisez ajaxSend et ajaxComplete si vous souhaitez intersecter la requête avant de décider quoi faire. Voir ma réponse ici: https://stackoverflow.com/a/15763341/117268

 
Trigger
$(document).ajaxStart(function() { $( "log" )text( "Trigger Fire successfully." ); }); $( ".local" ).click(function() { $( ".result" ).load("c:/refresh.html."); });

Il suffit de parcourir cet exemple pour avoir une idée. Lorsque l’utilisateur clique sur l’élément avec la classe Local et que la requête Ajax est envoyée, le message du journal s’affiche.