html 5 input入力リアルタイム検出および遅延最適化
1473 ワード
あるプロジェクトは、このような場合、入力ボックス、リアルタイムで入力を監視し、要求をトリガーします.
第一のアイデアはinput上のonchange()メソッドで、試してみましたが、使いにくく、値などの変更が確認されてからトリガーされ、即時ではありません.
インターネットで調べてみると、
方法は確かに使えますが、リアルタイムで変更します.発送の頻度はちょっと早いですね.
タイマーをつけろ
問題はまた来て、タイマーは非同期で、遅延しますが、実行して、何も変わりません.
後にunbind,bindの解縛を考えたが,解縛の時間にキーボード入力のイベントは得られなかった.
最初のアイデアは、イベントのトリガ-タイマの削除-タイマの追加-関数の実行です.やはりよくないことに気づいて、タイマーが削除できないので、いっそ実行しません.
最後にインターネットで調べてみると、新しい方法が見つかりました.
タイムスタンプ法.
原理は、グローバル変数、タイムスタンプ、遅延0.5 sを入力するたびに、新しいタイムスタンプとバインドされたタイムスタンプが等しいことを監視し、次のステップを行うことです.
-----html-----
転載先:https://www.cnblogs.com/jason1991/p/9308765.html
第一のアイデアはinput上のonchange()メソッドで、試してみましたが、使いにくく、値などの変更が確認されてからトリガーされ、即時ではありません.
インターネットで調べてみると、
$("#fix").on('input propertychange', function(event){
});
方法は確かに使えますが、リアルタイムで変更します.発送の頻度はちょっと早いですね.
タイマーをつけろ
$("#fix").on('input propertychange', function(event){
setTimeout(function(){ // 0.5s
console.log($("#fix").val())
},500);
});
問題はまた来て、タイマーは非同期で、遅延しますが、実行して、何も変わりません.
後にunbind,bindの解縛を考えたが,解縛の時間にキーボード入力のイベントは得られなかった.
最初のアイデアは、イベントのトリガ-タイマの削除-タイマの追加-関数の実行です.やはりよくないことに気づいて、タイマーが削除できないので、いっそ実行しません.
最後にインターネットで調べてみると、新しい方法が見つかりました.
タイムスタンプ法.
原理は、グローバル変数、タイムスタンプ、遅延0.5 sを入力するたびに、新しいタイムスタンプとバインドされたタイムスタンプが等しいことを監視し、次のステップを行うことです.
-----html-----
------script-----
var last;
$("#fix").on('input propertychange', 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);
});
転載先:https://www.cnblogs.com/jason1991/p/9308765.html