Echtzeiterkennung und Verzögerungsoptimierung von HTML5-Eingaben

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

Die erste Idee besteht darin, die Methode onchange() für die Eingabe zu verwenden, aber sie funktioniert nicht. Sie wird erst ausgelöst, nachdem die Wertänderung bestätigt wurde, was nicht sofort erfolgt.

Ich habe online nachgeschaut,

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

Die Methode funktioniert zwar, ändert sich aber in Echtzeit. 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,5 Sekunden Verzögerung für die Ausführung console.log($(#fix).val()) },500); } );

Das Problem tritt erneut auf. Der Timer ist zwar verzögert, wird jedoch unverändert ausgeführt.

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 jedes Mal, wenn die globale Variable und der Zeitstempel durch Eingabe geändert werden, der neue Zeitstempel mit einer Verzögerung von 0,5 Sekunden überwacht wird und dem gebundenen Zeitstempel entspricht und dann mit dem nächsten Schritt fortgefahren wird.

-----html-----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix ist dein Eingabefeld last = event.timeStamp; //Verwenden Sie den timeStamp des Ereignisses, um die Zeit zu markieren, damit jedes Ereignis den Wert von last ändert. setTimeout(function(){ //Legen Sie eine Zeitverzögerung von 0,5 fest s zum Ausführen von if(last -event.timeStamp==0) //Wenn der Zeitunterschied 0 beträgt (d. h. innerhalb von 0,5 Sekunden nach Beendigung der Eingabe tritt kein anderes Tastenereignis auf), dann tun Sie, was Sie tun möchten { console.log($(#fix).val()) } } , 500);});

Das Obige ist die vom Herausgeber eingeführte Echtzeiterkennung und Verzögerungsoptimierung. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!