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

Cet article présente principalement la détection en temps réel et l'optimisation du délai d'entrée html5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

La première idée est la méthode onchange() en entrée. Je l'ai essayée, mais elle 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 et j'ai découvert que la méthode

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

fonctionne, mais elle doit être modifiée en temps réel. La fréquence d'envoi est un peu rapide.

Dépêchez-vous et ajoutez un timer setTimeout.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

Le problème revient. Le timer est asynchrone Bien qu'il soit retardé, il sera toujours exécuté et rien n'a changé.

Plus tard, j'ai pensé à la déliaison et à la liaison, mais aucun événement de saisie au clavier n'a été 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 j'ai trouvé une nouvelle méthode.

Méthode d'horodatage.

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

-----html-----

<input type="text" id="fix">
------script-----
var last;
$("#fix").on(&#39;input propertychange&#39;, function(event){
    //"#fix为你的输入框
       last = event.timeStamp;
       //利用event的timeStamp来标记时间，这样每次事件都会修改last的值，注意last必需为全局变量
       setTimeout(function(){    //设时延迟0.5s执行
            if(last-event.timeStamp==0)
               //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
              {
                   console.log($("#fix").val())
               }
        },500);
});

Résumé

Ce qui précède est pour Le tout le contenu de la détection en temps réel des entrées HTML5 et de l'optimisation des délais que vous avez présenté, j'espère que cela sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

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!