画像安定化と小型スロットルケース

　　私はフロントエンド開発者のためにスロットルを振ることが必要である、前の記事、直接およびユーザー体験だけでなく、ブラウザの負荷、サーバーの負荷依存でスロットルをJSで手ぶれ補正機能の実用化に言及しました一つの技術は習得します。ここではケースに応じて少しは手ブレ補正およびスロットリングの役割を具現化です。

　　まず、ないマウスの動きと手ぶれ補正イベントスロットリング・プロセス：

1  VARの NUM = 1 。
2          VAR oWrap =のdocument.getElementById（ 'ラップ' ）。
3          関数カウント（）{
 4              oWrap.innerHTML = NUM ++ 。
5          }
 6          oWrap.onmousemove =数えます。

　　上記のコードは、ボックス内の周りにマウスを移動するには、イベントハンドラも続けて呼び出されたときに、これはブラウザ上の不要な負荷が発生しますマウス移動イベントにバインドされたDIV。

手ぶれ補正機能（デバウンス）

　　防振機能（デバウンス）：トリガ・イベントを意味するが、一度だけ指定された時間後に実行される場合、指定時刻に、イベントがトリガされ、その関数の実行時間を再計算し、防振機能を即時実行および非即時実行Editionバージョンに分割されています

今非執行バージョン：

1つの 関数デバウンス（FN、待機）{
 2              VaRのタイムアウト。
3              リターン 機能（）{
 4                  VARのコンテキスト= この;
5つ                 のvar引数= 引数。
6                  場合（タイムアウト）{
 7                      てclearTimeout（タイムアウト）。
8                  }
 9                  タイムアウト=のsetTimeout（（）=> {
 10                      fn.apply（文脈、引数）
 11                  }、待機）。
12              }
 13          }
 14         oWrap.onmousemove =デバウンス（1000カウント）。

 

　　

　　手ぶれ補正機能結果の非実装はすぐにボックス（結果を見るにはここをクリックしてくださいGIF、実際の移動）の内側の周りにマウスを移動すると表示されたとき、私はトリガーにいたとき、1000ミリ秒イベント機能は、一度に実行された後、関数は、すぐに実行されませんイベントのトリガイベントの実行時間後に1秒以内に再度再計算され、イベントの後に関数を実行