防抖（debounce）和節(jié)流（throttle）---解決事件頻繁觸發(fā)造成頁面卡死

coordinate35 發(fā)布于2019-08-23 18:13 / 2804人閱讀

摘要：防抖和節(jié)流連續(xù)觸發(fā)觸發(fā)頻率很高的時間，不進行優(yōu)化，會出現(xiàn)頁面卡頓現(xiàn)象。節(jié)流防抖是多次觸發(fā)事件，目標函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時間。

防抖（debounce）和節(jié)流（throttle）

連續(xù)觸發(fā)（觸發(fā)頻率很高）的時間，不進行優(yōu)化，會出現(xiàn)頁面卡頓現(xiàn)象。
常見的需要優(yōu)化的事件：

鼠標事件:

mousemove（拖拽）

mouseover(劃過)

mouseWheel(滾屏)

鍵盤事件：

keydown(按下鍵盤)

keypress（按下字符鍵盤）

keyup(彈起鍵盤)

window resize/scroll

DOM 元素動態(tài)定位

優(yōu)化方式是控制事件處理器在一段時間內(nèi)的執(zhí)行次。

防抖

頻繁（連續(xù)）觸發(fā)事件（比如用戶觸發(fā)輸入事件input），不執(zhí)行目標動作，當不在觸發(fā)事件了，再執(zhí)行。

實現(xiàn)思路，在事件處理器內(nèi)，使用 setTimeout 包裹目標動作，一直觸發(fā)事件，就清除上次的定時器，不再觸發(fā)觸發(fā)事件，會執(zhí)行最后一個定時器，目標動作也執(zhí)行一次了。

JS代碼：

function debounce(callback, delay) {
  let timeout = 0;
  return e => {
    console.log("清除", timeout, new Date());
    clearTimeout(timeout); //input 一直觸發(fā)，就清除上一次的定時器，防止執(zhí)行目標函數(shù)，直到事件不觸發(fā)事件，最后一個定時器沒有清除，delay 時間后就會執(zhí)定時器，就確保了目標函數(shù)只執(zhí)行一次。
    timeout = setTimeout(() => {
      callback(e);
    }, delay);
    console.log("新的", timeout, e.target.value, new Date());
  };
}
let print = debounce(e => {
  let value = e.target.value;
  console.log(value, new Date());
}, 1000);
document
  .querySelector("#input")
  .addEventListener("input", print, false);

清除定時器的時機很關(guān)鍵，在新定時器生成之前，如果在之后，會將所有定時器都清除，目標函數(shù)一次都不執(zhí)行。

節(jié)流

防抖是多次觸發(fā)事件，目標函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時間。而節(jié)流是在一段時間內(nèi)，確保目標函數(shù)只執(zhí)行一次，實現(xiàn)緩慢執(zhí)行目標函數(shù)的效果。

上面的輸入使用節(jié)流實現(xiàn)：

let thorttle = (callback, delay) => {
  let timeout = 0;
  let now = new Date() - 0;
  return e => {
    console.log("now", now);
    let last = new Date() - 0;
    clearTimeout(timeout);
    if (last - now >= delay) {
      console.log("時間間隔", last - now);
      callback(e);
      now = last;//將上執(zhí)行的時間賦值給 now
    } else {
      //將 delay 時間內(nèi)多次觸發(fā)事件，目標函數(shù)合并到這里執(zhí)行
      timeout = setTimeout(() => {
        callback(e);
      }, delay);
    }
  };
};
let write = thorttle(e => {
  console.log(e.target.value, new Date());
}, 5000);
document
  .querySelector("#input")
  .addEventListener("input", write, false);

兩者比較

節(jié)流在某個時間段內(nèi)，目標函數(shù)能執(zhí)行一次，限制目標函數(shù)的執(zhí)行頻率，不管事件觸發(fā)了多少次；
防抖是多次觸發(fā)事件，目標函數(shù)只執(zhí)行一次，不管觸發(fā)了這些事件用了多少時間。

節(jié)流函數(shù)限制目標函數(shù)的執(zhí)行頻率，有連續(xù)變化的效果，適用于關(guān)注變化過程的操作，可以調(diào)整目標函數(shù)執(zhí)行頻率使得變化更加平滑，比如動畫、改變窗口時執(zhí)行某些操作等，常用事件resize、scroll、mouseWheel、touchmove、mouseover等；

防抖函數(shù)適用于更關(guān)注結(jié)果的操作，不太關(guān)注操作過程，常見的事件有 input、keyup等。

最后看一個將防抖和節(jié)流都用 resize 事件的效果，更能體會兩者的區(qū)別：

function debounce(callback, delay) {
  let timeout = 0;
  return e => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      callback(e);
    }, delay);
  };
}
let print = debounce(e => {
  let value = e.target.value;
  console.log("debounce", window.innerWidth);
}, 500);
let thorttle = (callback, delay) => {
  let timeout = 0;
  let now = new Date() - 0;
  return e => {
    let last = new Date() - 0;
    clearTimeout(timeout);
    if (last - now >= delay) {
      callback(e);
      now = last;
    } else {
      timeout = setTimeout(() => {
        callback(e);
      }, delay);
    }
  };
};
let write = thorttle(e => {
  console.log("thorttle", window.innerWidth);
}, 500);
window.addEventListener("resize", write, false);
window.addEventListener("resize", print, false);

參考

函數(shù)節(jié)流與函數(shù)防抖
函數(shù)防抖與函數(shù)節(jié)流