Détection en temps réel des entrées HTML5 et optimisation des délais

Il existe un projet dans lequel la zone de saisie surveille la saisie en temps réel et déclenche la demande.

La première idée est d'utiliser la méthode onchange() sur l'entrée. Je l'ai essayée, mais cela ne fonctionne pas. Elle ne sera déclenchée qu'après confirmation du changement de valeur, ce qui n'est pas immédiat.

J'ai vérifié en ligne,

 $(#fix).on('input propertychange', function(event){});

La méthode fonctionne, mais change en temps réel. La fréquence d'envoi est un peu rapide.

Dépêchez-vous et ajoutez une minuterie setTimeout.

 $(#fix).on('input propertychange', function(event){ setTimeout(function(){ //Délai de 0,5 s pour exécuter console.log($(#fix).val()) },500); } );

Le problème revient. Le timer est asynchrone Bien qu'il soit retardé, il sera toujours exécuté sans aucun changement.

Plus tard, j'ai pensé à la dissociation et à la liaison, mais aucun événement de saisie au clavier n'a pu être obtenu pendant le temps de déliaison.

La première idée à l'époque était de déclencher l'événement - supprimer le timer - ajouter le timer - exécuter la fonction. J'ai trouvé que ce n'était toujours pas bon et que la minuterie ne pouvait pas être supprimée, j'ai donc simplement arrêté de l'exécuter.

Finalement, j'ai vérifié en ligne et trouvé une nouvelle méthode.

Méthode d'horodatage.

Le principe est qu'à chaque fois que la variable globale et l'horodatage sont modifiés par entrée, le nouvel horodatage sera surveillé avec un délai de 0,5 s et est égal à l'horodatage lié, puis passera à l'étape suivante.

-----html-----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix est votre input Box last = event.timeStamp; //Utilise le timeStamp de l'événement pour marquer l'heure, de sorte que chaque événement modifie la valeur de last. Notez que last doit être une variable globale setTimeout(function(){ //Définit un délai de 0,5. s pour exécuter if(last -event.timeStamp==0) //Si le décalage horaire est de 0 (c'est-à-dire qu'aucun autre événement de frappe ne se produit dans les 0,5 secondes après que vous ayez arrêté de taper), alors faites ce que vous voulez faire { console.log($(#fix).val()) } } , 500);});

Ce qui précède est la détection en temps réel des entrées HTML5 et l'optimisation des délais présentées par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !