Maison >interface Web >js tutoriel >Retarder l'appel Ajax pendant x secondes
<span>var pendingCall = { timeStamp: null, procID: null }; </span> <span>$('li a').click(function (e) { </span> e<span>.preventDefault(); </span> <span>var getUrl = $(this).attr("href"); </span> <span>var timeStamp = Date.now(); </span> <span>var printCall = function () { </span> $<span>.ajax({ </span> <span>url: getUrl, </span> <span>type: "GET", </span> <span>beforeSend: function () { }, </span> <span>error: function (request) { alert(request) }, </span> <span>success: function (data) { </span> <span>if (pendingCall.timeStamp != timeStamp) { return false; } </span> <span>$('#contentdiv').html(data); </span> pendingCall<span>.procID = null; </span> <span>} </span> <span>}); </span> <span>}; </span> <span>if (pendingCall.procID) { </span> <span>clearTimeout(pendingCall.procID) </span> <span>}; </span> <span>//set the time before call 3000 = 3 seconds </span> pendingCall <span>= { timeStamp: timeStamp, procID: setTimeout(printCall, 3000) }; </span><span>});</span>
<span>jQuery(document).ready(function () { </span> <span>setTimeout( "jQuery('#loading_mask').hide();", 1000 ); </span><span>});</span>
Le retard d'un appel AJAX peut être bénéfique dans plusieurs scénarios. Par exemple, si vous avez une fonction de recherche sur votre site Web qui déclenche un appel Ajax chaque fois qu'un utilisateur tape un caractère, cela pourrait entraîner une charge importante sur votre serveur. En introduisant un retard, vous pouvez vous assurer que l'appel AJAX n'est fait qu'après que l'utilisateur a cessé de taper, réduisant la charge du serveur. Il peut également améliorer l'expérience utilisateur en empêchant les temps de chargement inutiles et en s'assurant que les résultats les plus pertinents sont affichés.
jQuery fournit un moyen simple de retarder les appels AJAX en utilisant la fonction Settimeout. Cette fonction vous permet de spécifier un retard en millisecondes avant que l'appel Ajax ne soit effectué. Voici un exemple de base:
setTimeout (function () {
$ .ajax ({
// options ajax
});
}, 2000); // 2 secondes de retard
Dans cet exemple, l'appel ajax sera retardé de 2 secondes.
Oui, vous pouvez annuler un appel ajax retardé en effacant le délai. Lorsque vous appelez SetTimeout, il renvoie un ID unique qui peut être utilisé pour annuler le délai d'attente avec la fonction ClearTimeout. Voici comment vous pouvez le faire:
var timeUtid = setTimeout (function () {
$ .ajax ({
// ajax options
});
}, 2000);
// annuler le délai
ClaceTimeout (tempsoud); Annulé avant qu'il ait une chance d'exécuter.
Y a-t-il des inconvénients pour retarder les appels AJAX?
Le retard optimal pour un appel AJAX dépend de plusieurs facteurs, y compris la charge du serveur, la nature de l'appel Ajax et les attentes de l'utilisateur. Un bon point de départ consiste à définir un retard de quelques centaines de millisecondes, puis à l'ajuster en fonction des performances et des commentaires des utilisateurs.
Oui, vous pouvez retarder plusieurs appels AJAX à la fois en utilisant plusieurs appels Settimeout Settimeout. Chaque appel Settimeout renvoie un ID unique qui peut être utilisé pour annuler le délai d'attente si nécessaire.
Oui, Settimeout est une fonction polyvalente qui peut être utilisée avec n'importe quelle fonction JavaScript, pas seulement AJAX. Vous pouvez l'utiliser pour retarder n'importe quel morceau de code JavaScript.
Oui, vous pouvez utiliser Settimeout dans une boucle pour retarder plusieurs appels AJAX. Cependant, gardez à l'esprit que Settimeout est asynchrone, ce qui signifie que la boucle n'attendra pas la fin du temps mort avant de passer à la prochaine itération. Cela peut conduire à un comportement inattendu s'il n'est pas géré correctement.
Oui, vous pouvez retarder un appel ajax sans utiliser jQuery en utilisant la fonction Settimeout avec l'API Fetch ou l'objet XMLHTTPReQuest. Cependant, JQuery fournit un moyen plus simple et plus pratique de passer des appels Ajax.
Oui, vous pouvez utiliser Settimeout avec des promesses pour retarder la résolution ou le rejet d'une promesse. Cela peut être utile lorsque vous travaillez avec des opérations asynchrones comme les appels Ajax.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!