函數的防抖和節流

目的：節約性能開銷，避免屢次頻繁的觸發業務邏輯形成頁面卡頓。

應用場景：節流和防抖的核心其實就是限制某一個方法被頻繁觸發，
好比說DOM事件的監聽回調，input的keyup、keydown，window.scroll,window.resize事件，按鈕連續變態點擊致使無限制發送接口請求等應用場景

防抖

一個須要頻繁觸發的函數，在規定的時間內，只執行最後一次，前面的觸發不執行。(當持續觸發事件的時候，函數是徹底不執行的，等最後一次觸發結束的一段時間以後，再去執行)

原理

第一次調用函數建立一個定時器，指定的時間間隔後運行代碼。第二次調用函數時，它會清除前一次的定時器並設置另外一個。

let debounce = function(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
};
let box = document.getElementById("app");
box.onmousemove = debounce(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 100);

節流

一個函數執行一次後只有大於設定的執行週期纔會執行第二次。(指連續觸發事件可是在 n 秒中只執行一次函數)

原理

用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，而後每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，若是是，則執行，並更新上次執行的時間戳，這樣循環下去

function throttle(func, delay) {
  let run = true;
  return function() {
    if (!run) {
      return;
    }

    run = false;
    setTimeout(() => {
      func.apply(this, arguments);
      run = true;
    }, delay);
  };
}

box.onmousemove = throttle(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);