JS画像安定化、スロットル

気まぐれは、トリガ・イベントの時点で、イベントの数は頻繁に他のイベントONMOUSEMOVE、onscroll、などさらにonResizeとして、資源の無駄が発生するか、ページカトンの多くは発生しませんトリガされます。

：それは新しい知識のポイントにつながる手ぶれ補正、チョーク。

画像安定化は：イベントが遅延中に再度トリガされた場合、コードを通過する時間の遅延期間の終了後に、トリガ・イベントを参照し、遅延時間が再計算されます。

例：ブラウザがイベントをトリガしてonResize、画像安定化せずに、ブラウザウィンドウのサイズ変更をドラッグ停止、ページのレイアウトを再計算する必要がある、ブラウザは多くの資源を無駄になり、計算に停止することはありませんトリガイベントは、イベントが終わったと判断された600ミリ秒後に600ミリ秒以内に再びイベントをトリガした場合、防振、時間遅延と相まって、再計算された600ミリ秒、それはイベントの終了後に決定されるまでは、トリガされます。

コードは以下の通りであります：

//最初のパラメータは、第2のパラメータは、時間遅延トリガ・イベントの後に実行される方法である
機能デバウンス（方法、ディレイ）{ 
    せタイマ = NULL ;
     リターン 機能（）{ 
        LETコンテキストは = これを、引数= 引数。
         IF {（タイマ）
            ;てclearTimeout（タイマ）
            タイマ = NULL ; 
        } 
        タイマのsetTimeout（= 関数（）{ 
            ; method.apply（文脈、引数）
        、遅延を}）; 
    } 
} 
LETファン =デバウンス（（）=> { 
        コンソール.logに（'123' ）。
}、 600 ）。
window.addEventListener（ 'リサイズ'、楽しいです）。

絞りは：、指定された時間内にイベントをトリガーするイベントの実行頻度を低減するだけ指します。

例：コンテンツの合法性を決定するために、実入力ボックス、通常の状況下では、我々は入力イベントバウンスにキーボードを結合し、バウンスは、ユーザーが速すぎて入力した場合、それは何回もの裁判官を行います、判断を行うための時間です。1秒を絞る、その後にかかわらず、すべてが一度判断した後、ユーザーエクスペリエンスに影響を与えません何回の1秒以内のユーザ入力を意味し、我々は、スロットルの目的を達成しています

コードは以下の通りであります：

スロットル機能（FUNC、待機）{ 
    ましょうlastTime = nullの
    LETタイムアウト
    リターン機能（）{ 
        これは文脈=ましょう; 
        みましょう今=新しい新しい日付を（）; 
        LET引数のArg =; 
        //もし最後の実行時間とトリガ時間が1つのより大きい実行サイクル、実行ある
        IF（今- lastTime -待機> 0）{ 
            //タイミングをクリアする前に、我々はタスクを持っている場合は
            IF（タイムアウト）{ 
                てclearTimeout（タイムアウト）
                タイムアウト= NULL 
            } 
            func.apply（コンテキスト、アルギニン）
            =今lastTime 
        }他のIF（！タイムアウト）{ 
            タイムアウト=のsetTimeout（（）=> { 
                実行コンテキストを変更する//
                func.apply（コンテキスト、引数）
            }、待機）
        } 
    } 
} 
探求=スロットル（（）=> {にconsole.log（ "数据判断完成"）を}せ、1000）
BTN = document.getElementsByTagName（ 'ボタン'ましょう） [0]。
btn.addEventListener（ 'クリック'、クエスト）

　同じ方法および画像安定化を用いて

要約：; onscroll、そのようなスロットルの使用などのイベントONMOUSEMOVEイベントは、画像安定化を使用onkeyupの通常の状況下では、さらにonResize。

完成した、嵐のレポート。

おすすめ