フロントエンドのパフォーマンスの最適化 - 画像安定化とスロットル

画像安定化とスロットルは何ですか

• 画像安定化
  ように、トリガ・イベントの後にいくつかの時間のための機能と、その後ストップの実行
• 絞り
  固定周波数のトリガでLet関数を

なぜ手ブレスロットル

私たちは、ボタンを与えるか、またはリアルタイムの応答を必要としない場合は、対応するイベントの時間を追加するためにマウスを移動すると、ページのパフォーマンスを最適化するために、スロットル、画像安定化を使用することができます
HTMLを

     <button id="add">点击加一</button>
     <label id="addLable" for="add"></label>

JS

let count = 0;
const add = document.querySelector('#add');
const addLabel = document.querySelector('#addLable');
add.addEventListener('click', () => {
  addLable.innerHTML = ++count;
});

シェイク

原則は当初の計画をキャンセルし、新しいイベント中にトリガ場合は手ぶれ補正機能は、関数が実行を遅らせることを可能にするようにすることです遅れた
HTMLを

 <button id="add1">防抖加一</button>
 <label id="addLable1" for="add1"></label>

JS

let count1 = 0;
const add1 = document.querySelector('#add1');
const addLabel1 = document.querySelector('#addLable1');
let timeout;
const add1Click = function() {
 addLabel1.innerHTML = ++count1;
};
add1.addEventListener('click', () => {
 if (timeout) {
   clearTimeout(timeout);
 }
 timeout = setTimeout(add1Click, 500);
});

よりエレガントなコード
根拠の背後を知るために、あなたはより便利で簡単な探して、私たちはlodashツールライブラリでそれを達成するのを助けることができ
_.debounce（FUNC、タイムアウト）
lodash公式サイト

let count1 = 0;
const add1 = document.querySelector('#add1');
const addLabel1 = document.querySelector('#addLable1');
let timeout;
const add1Click = function() {
  addLabel1.innerHTML = ++count1;
};
// add1.addEventListener('click', () => {
//   if (timeout) {
//     clearTimeout(timeout);
//   }
//   timeout = setTimeout(add2Click, 500);
// });
add1.addEventListener('click', _.debounce(add1Click, 500));

スロットリング

一定時間内にスロットル機能、一度だけトリガー
HTML

      <button id="add2">节流加一</button>
      <label id="addLable2" for="add2"></label>

JS

let count2 = 0;
const add2 = document.querySelector('#add2');
const addLabel2 = document.querySelector('#addLable2');
const add2Click = function() {
  addLabel2.innerHTML = ++count2;
};
let beAbleClick = true;
add2.addEventListener('click', () => {
  if (!beAbleClick) {
    return;
  }
  setTimeout(() => {
    add2Click();
    beAbleClick = true;
  }, 500);
  beAbleClick = false;
});

よりエレガントに
同じlodashツールが_.throttle（FUNC、タイムアウト）利用可能な方法を持っています

let count2 = 0;
const add2 = document.querySelector('#add2');
const addLabel2 = document.querySelector('#addLable2');
const add2Click = function() {
  addLabel2.innerHTML = ++count2;
};
// let beAbleClick = true;
// add2.addEventListener('click', () => {
//   if (!beAbleClick) {
//     return;
//   }
//   setTimeout(() => {
//     add2Click();
//     beAbleClick = true;
//   }, 500);
//   beAbleClick = false;
// });
add2.addEventListener('click', _.throttle(add2Click, 500));
``