7
votes

Essayer d'ajouter du délai à la demande de jQuery Ajax

J'essaie de retarder une demande Ajax afin qu'elle soit envoyée 2-3 secondes après la dernière clé d'une cellule d'entrée.
Jusqu'à présent, j'ai réussi à retarder les demandes, mais après 2-3 secondes, je reçois une demande envoyée pour chaque clé de clé dans le champ ...
Comment puis-je faire annuler JQuery les premiers et envoyer le dernier porte-clés?
Voici le code jusqu'à présent:

function ajaxSearchRequest($type){
                var ajaxRequest2;  // The variable that makes Ajax possible!

                try{
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest2 = new XMLHttpRequest();
                }catch (e){
                  // Internet Explorer Browsers
                  try{
                     ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                    ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                    // Something went wrong
                    alert("Browser error!");
                    return false;
                     }
                  }
                }

                ajaxRequest2.onreadystatechange = function(){
                  if(ajaxRequest2.readyState == 4){

                        $result = ajaxRequest2.responseText;
                        $('#resultcontainer').html($result);

                    }}


                var searchterm = document.getElementById($type).value;


                var queryString ="?searchterm=" + searchterm +"&type=" +$type;


                if(searchterm !== ""){

                ajaxRequest2.open("GET", "searchrequest.php" + 
                                 queryString, true);
                ajaxRequest2.send(null);
                }
        }


6 commentaires

Postez le code de AjaxSearcherRequest


@Imdad pourquoi est-ce nécessaire? Vous pouvez déjà voir chaque porte-clés faisant un nouveau délai d'attente sans annuler les précédents.


Il y a d'autres travaux autour. Je ne peux dire que si je sais quelle est la fonction


Existe-t-il un moyen d'annuler l'événement de retard »sur .keydown? Donc, s'il n'y a pas d'autre clé, l'événement de Keyup se produira réellement?


@krasatos La solution consiste simplement à annuler précédemment ( .cleartimeout ) lorsque vous définissez un nouveau délai d'attente. Ensuite, le dernier délai d'attente de clé de clé ne sera pas annulé.


Bonne façon. Je n'ai pas pensé à ça +1.


3 Réponses :


16
votes

stocker le délai d'attente dans une variable, vous pourrez donc effacer les délais d'attente récents:

clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 3000);


3 commentaires

Je vais vous donner un +1 lorsque vous le faites sans stocker cette valeur dans une variable globale ...


Thanx beaucoup, ça a fonctionné, voici le code final: `$ ('# nom de nom'). Focus (fonction () {$ ('termes: entrée'). Val (" "). Keyup (fonction ( ) {casquettes (ceci); $ Type = $ (ceci) .attr ("id) (" id "); window.timer = settimeout (fonction (fonction () {// Définition du délai pour chaque touche AjaxSearcherRequest ($ Type); // exécute le Demande Ajax}, 3000);}). Clé (Fonction () {Cleartimeout (Window.Timer);});


FFS C'est l'exemple de code. Il n'a pas besoin d'une fermeture pour que la solution soit apparente.



-2
votes

J'aime la réponse de Molle, mais je voudrais améliorer encore les performances xxx

Ce changement entraînera une demande Ajax et d'envoyer une nouvelle demande. C'est utile lorsque vous

dactylographié-> attendu 4 sec -> Demande envoyée -> Type à nouveau (réponse non reçue) -> Attendu 4 secondes -> Autres feux de demande


8 commentaires

Parce que c'est une mauvaise réponse? Abandonner les demandes Ne vous aidez pas - les serveurs (généralement) conservent les requêtes de traitement. Le bon correctif n'est pas de continuer à envoyer des demandes d'envoi.


Mais cela diminue les frais généraux du réseau. Et résout le problème d'obtenir plusieurs réponses si vous êtes un peu lent dans la frappe.


Non, n'envoie pas les demandes "diminuer les frais de réseau". Annulation d'une demande AJAX arrête simplement la réponse éventuelle d'atteindre le rappel.


J'apprécie toute citation de remettre votre argument selon lequel "abandonner ne diminue pas la surcharge de réseau et arrête simplement les données à recevoir au rappel"


Il devrait être de bon sens que pas d'envoi de demandes d'envoi en premier lieu a une surcharge de réseau moindre que d'envoyer des demandes mais en les abandonnant.


Bien sûr que non pas d'envoi de demande a moins de frais généraux. Mais l'annulation est mieux que de ne pas annuler. Je pense que c'est aussi un bon sens. Je demanderais @krasatos de l'utiliser et de vous faire savoir que s'il a pratiquement amélioré la performance ou non. J'ai utilisé cette technique avant et vu beaucoup d'amélioration pratiquement!


Ne pas envoyer en premier lieu vaut mieux que d'envoyer et d'annuler. Quelle est la solution évidente et déjà acceptée.


Peut-être que vous n'avez pas encore compris le flux complet. Veuillez lire les dernières lignes de ma réponse. Si vous appuyez sur quelques touches, attendez. La demande est envoyée. Puis, après 4 secondes, vous tapez à nouveau. Ensuite, une autre demande sera envoyée. Mon code consiste à arrêter l'ancienne demande (si elle est envoyée et réponse non reçue). Fondamentalement, c'est une amélioration étendue de la réponse acceptée.



3
votes

Qu'est-ce que vous essayez de faire est appelé déboquage .

voici un plugin JQuery par Ben Alman qui fait le travail.

et Underscore.js inclut également cette fonctionnalité.

Il y a vraiment pas besoin de pirater le système de demande Ajax . Assurez-vous simplement que cela s'appelle au bon moment.


0 commentaires