Maison >interface Web >js tutoriel >Retarder l'appel Ajax pendant x secondes

Retarder l'appel Ajax pendant x secondes

Joseph Gordon-Levitt
Joseph Gordon-Levittoriginal
2025-03-07 00:53:08839parcourir

Delay AJAX call for X seconds

Retarder l'appel Ajax pendant x secondes

Extrait de code jQuery pour retarder l'appel Ajax pour x secondes. Pourrait être utilisé pour les événements qui nécessitent une action avant d'obtenir des données du côté serveur via Ajax. Mise à jour: il existe un moyen plus facile de le faire en utilisant la fonction setTimeout () - voir ci-dessous pour un exemple. Apprécier! :)
<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>

SetTimeout Alternative

Voici un extrait qui supprimera le masque de chargement de votre page, une seconde après le chargement d'un site Web. Vous pouvez configurer un masque de chargement pour couvrir l'ensemble de votre site Web pendant que votre site Web charge empêcher les gens de consulter des images de chargement par exemple.  
<span>jQuery(document).ready(function () {
</span>	<span>setTimeout( "jQuery('#loading_mask').hide();", 1000 );
</span><span>});</span>

Les questions fréquemment posées (FAQ) sur le retard des appels Ajax

Quel est le but de retarder un appel ajax?

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.

Comment puis-je retarder un appel AJAX en utilisant jQuery?

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.

Puis-je annuler un appel ajax retardé?

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?

Bien que le retard des appels AJAX puisse améliorer les performances du serveur et l'expérience utilisateur, ce n'est pas toujours la meilleure solution. Si le retard est trop long, il peut rendre votre site Web lent et insensible. Il est important de trouver un équilibre entre la réduction de la charge du serveur et le maintien d'une expérience utilisateur fluide.

Comment puis-je déterminer le retard optimal pour un appel 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.

Puis-je retarder plusieurs appels AJAX à la fois?

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.

Puis-je utiliser Settimeout avec d'autres fonctions JavaScript?

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.

Puis-je utiliser Settimeout dans une boucle pour retarder plusieurs appels AJAX?

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.

Puis-je retarder un appel ajax sans utiliser jQuery?

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.

Puis-je utiliser Settimeout avec des promesses?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn