[ヘルプ]スロットル（絞り）上の7理解の正面の画像安定化（デバウンス）

いつものプロジェクトでスロットルと安定化は非常に一般的でなく、インタビューは、多くの場合、知識の問題になり、今日我々が学ぶために一緒にされています。

スロットリング

理解するのは簡単：一度n秒ごとに実行される制御機能。

効果

高周波ユーザーが、彼らは多数の計算およびレンダリングもたらしたパフォーマンスの問題を処理するために必要なだけのイベントをイベントをトリガしないようにします。

シナリオ

onscroll
さらにonResize
MouseMove
touchmove
...

例

ここでは、する必要がonscroll理解を深め、一例を記述します。

たとえば、シナリオがあります：私たちは、おそらく我々が直接、次のコードを記述します、動的にいくつかのデータをロードするために、時間の端部にスクロールするには、ブラウザのスクロールバーを決定する必要があります。

let obj = document.querySelector('.throttle-test');
let _count = 0;

obj.onscroll = function () {
  // 假设已经滚动到底部了，我们给_count加1。
  _count++;
  console.log('执行次数：' + _count);
}
复制代码

私たちは、ブラウザの印刷の結果を見て、gif形式は以下の表を参照してください。

ので、あなたが見ることができ、関数が20を行って、これは我々が望むものではないことは明らかであるonscroll場合は、あなたがトリガー・イベントの端部に転がり行くのを待つことはありませんが、簡単にいくつかにつながることができますトリガを、中断されていないされますパフォーマンスの問題は、今回はスロットルを使用する必要があります。

私たちは、次の操作を行うためのコードを変更します。

let obj = document.querySelector('.throttle-test');
let _count = 0;
let _canRun = true;
obj.onscroll = function () {
  if (!_canRun) {
    return false;
  }
  _canRun = false;
  setTimeout(function () {
    // 假设已经滚动到底部了，我们给_count加1。
    _count++;
    console.log('执行次数：'+_count);
    _canRun = true;
  }, 500);
}
复制代码

以下のチャートによってGIFは、我々は最終的な機能のみを2回実施されていることがわかります。

タイマーによって、我々はパフォーマンスを向上させるように制御機能は、大幅に実行頻度を減らし、その後、一回500ミリ秒ごとに実行されています。

スロットル概念の理解

画像安定化とスロットルは、彼らが類似点を持っているが、異なる、混同しやすいです。ここではまず、比喩を通じて理解を深めスロットルということですします。

コンセプトスロットリングは、あなたが川にダムを建設ダムを想像することができる水の流れは、あなたが水をゆっくりさせることができないことができることができますすることはできません。言い換えれば、あなたは、ユーザーのメソッドが実装されていないことはできません。（個人的にこのような比喩が画像安定化との違いを言うの画像であるため）。

シェイク

ユーザーがn秒のトリガイベントに繰り返し、ユーザーは、もはや一度実行するために行く前に、トリガ・イベントまで待っていない場合にのみ、再度タイミング関数が実行されない場合はn秒内の制御機能は、一度実行することができます。

アクション节流パフォーマンスの問題のユーザー高周波トリガイベントを防ぐためにも、同様の、しかしトリガ。

画像安定化概念の理解

誰かがエレベーター（トリガイベント）に入った時にエレベーターをやって想像してみて、エレベーターは10秒（実行イベント）の後に開始されること、そして誰かが、我々が持っている（10秒に再びイベントをトリガー）エレベーターに入った場合再び10秒で（リタイミング）をトリガします。

例

ユーザーが文字を入力したときに、私たちが重複したユーザー名があるかどうかを確認するために、リアルタイムでバックグラウンドに要求を送信する必要があり、ユーザーはユーザー名を記入してみましょうするためのテキストボックスがあります。実際には、手ぶれ補正機構が参加する前に、ユーザー入力がhelloworld、私たちは10件のリクエストを送ってきた、それは明らかに望ましくありません。

コードを見てください：

let obj = document.querySelector('#testInput');  // 获取文本输入框
let _count = 0;

obj.onkeyup = function () {
  _count++;
  console.log('执行次数：' + _count);
}
复制代码

私たちは、手ぶれ補正機構が参加するためのコードを与えます：

私たちは私たちが、ユーザが入力したと判断し、ユーザーはもはや一時停止n秒でイベントをトリガすることを想定することはできませんあなたが要求を送信し、次の時間、完了です。

コードを見てください：

let obj = document.querySelector('#testInput');
let timer = null;
let _count = 0;

obj.onkeyup = function () {
  clearTimeout(timer);  // 清除定时器，重新计时
  timer = setTimeout(function () {
    _count++;
    console.log('执行次数：'+_count);
  }, 800);
}
复制代码

私は、入力されたとき、私は入力が一度トリガーされます停止するまで、マップを移動することにより、あなたが見ることができ、イベントがトリガされません。

アイデアの実現：イベントが頻繁にオブジェクトコードが実行されることはありませんトリガされた場合、我々は、タイマーオブジェクトコードを配置する必要があります。私たちが追加したので、なぜ、それを強制しませんclearTimeout。これは、途中の同等はエレベーター、エレベーターに続けと、ユーザが（誰エレベーターに入ります）、唯一の私たちの集合時間に応じてオブジェクトコードに行くためにこの時間を再入力しませんでしまで10秒同じ前にカウントダウンを再起動する必要がありました実行時間（エレベーターが開始されません）。

絞りと防振との間の差

スロットリング：我々は一度n秒ごとに実行された時間間隔に応じた目標コードを設定します
画像安定化：ユーザーはオブジェクトコードを実行するために行く前に、イベントをトリガし、アクションがイベントで実行しなければならないであろう阻害しません。イベントがトリガされた場合には、オブジェクトコードはおそらく実行されません
スロットル機能は比で使用されるinput、keyupイベントのような、より頻繁にトリガされresize、touchmove、mousemove、scroll。节流強制機能は一定のレートで実行されます。したがって、この方法は、アニメーション関連で使用されるシナリオに適しています。

遂に

読書のためのおかげで、私はあなたの助けを願っています。あなたが不適切な記述地元紙を持っている場合は、非常に感謝し、私を修正してください。また、本明細書だけではなく、適切な実際の開発で使用するためにテストするために使用されるコードを使用することを実証し、実際の開発では使用することができLodash、ライブラリ节流と防抖、ここでのコードを掲載しませ方法、カザフスタンのすべての後に、より包括的な検討を。

Lodash図書館住所：

スロットリング：www.lodashjs.com/docs/4.17.5 ...

画像安定化：www.lodashjs.com/docs/4.17.5 ...