Echtzeiterkennung und Verzögerungsoptimierung von HTML5-Eingaben

Dieser Artikel stellt hauptsächlich die Echtzeiterkennung und Verzögerungsoptimierung von HTML5-Eingaben vor. Ich hoffe, dass er für Freunde hilfreich ist.

Es gibt ein Projekt, bei dem die Eingabebox die Eingabe in Echtzeit überwacht und die Anfrage auslöst.

Die erste Idee ist die onchange()-Methode bei der Eingabe. Ich habe sie ausprobiert, aber sie funktioniert nicht. Sie wird erst ausgelöst, nachdem die Wertänderung bestätigt wurde.

Ich habe online nachgeschaut und festgestellt, dass die Methode

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

zwar funktioniert, aber in Echtzeit geändert werden muss. Die Sendefrequenz ist etwas schnell.

Beeilen Sie sich und fügen Sie einen Timer setTimeout hinzu.

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

Das Problem tritt erneut auf. Obwohl es verzögert ist, wird es trotzdem ausgeführt und es hat sich nichts geändert.

Später dachte ich darüber nach, die Bindung aufzuheben und zu binden, aber während der Aufhebungszeit konnten keine Tastatureingabeereignisse abgerufen werden.

Die erste Idee damals war, das Ereignis auszulösen – den Timer zu löschen – den Timer hinzuzufügen – die Funktion auszuführen. Ich stellte fest, dass es immer noch nicht gut war und der Timer nicht gelöscht werden konnte, also habe ich einfach die Ausführung abgebrochen.

Schließlich habe ich online nachgeschaut und eine neue Methode gefunden.

Zeitstempelmethode.

Das Prinzip besteht darin, dass bei jeder Änderung der Eingabe die globale Variable und der Zeitstempel mit einer Verzögerung von 0,5 Sekunden überwacht werden. Wenn der neue Zeitstempel mit dem gebundenen Zeitstempel übereinstimmt, fahren Sie mit dem nächsten Schritt fort.

-----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);
});

Zusammenfassung

Das Obige ist eine Einführung für Sie Ich hoffe, dass der gesamte Inhalt der Echtzeiterkennung und Verzögerungsoptimierung von HTML5-Eingaben für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonEchtzeiterkennung und Verzögerungsoptimierung von HTML5-Eingaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!