ホームページ > 記事 > ウェブフロントエンド > HTML5 入力のリアルタイム検出と遅延の最適化

HTML5 入力のリアルタイム検出と遅延の最適化

青灯夜游転載: 2018-10-09 16:56:443414ブラウズ

この記事は主に html5 入力のリアルタイム検出と遅延最適化について紹介しています。必要な方は参考にしていただければ幸いです。

入力ボックスがリアルタイムで入力を監視し、リクエストをトリガーするプロジェクトがあります。

最初のアイデアは、入力の onchange() メソッドです。試してみましたが、値の変更が確認された後にのみトリガーされ、即時ではありません。

オンラインで確認したところ、

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

メソッドは機能することがわかりましたが、リアルタイムで変更する必要があります。送信頻度は少し早いです。

急いでタイマーを追加してください setTimeout.

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

問題は再び発生します。タイマーは遅延していますが、実行され、何も変わりません。

後でバインドを解除してバインドしようと思ったのですが、バインド解除中にキーボード入力イベントが取得できませんでした。

当時の最初のアイデアは、イベントのトリガー - タイマーの削除 - タイマーの追加 - 関数の実行でした。それでもダメでタイマーを削除できないことがわかったので、単純に実行を中止しました。

最後に、オンラインで調べたところ、新しい方法を見つけました。

タイムスタンプ方式。

原則として、入力が変更されるたびに、グローバル変数とタイムスタンプが 0.5 秒の遅延で監視されます。新しいタイムスタンプがバインドされたタイムスタンプと等しい場合は、次のステップに進みます。

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

概要

以上は皆さんへの紹介ですHTML5 入力のリアルタイム検出と遅延最適化の全内容が、皆様の学習に役立つことを願っています。関連チュートリアルの詳細については、Html5 ビデオチュートリアルをご覧ください。

HTML5 入力のリアルタイム検出と遅延の最適化

関連記事