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

MasonEast 發(fā)布于2019-08-26 14:00 / 1243人閱讀

摘要：當(dāng)持續(xù)觸發(fā)事件的時(shí)候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結(jié)束的一段時(shí)間之后，再去執(zhí)行原理第一次調(diào)用函數(shù)創(chuàng)建一個(gè)定時(shí)器，指定的時(shí)間間隔后運(yùn)行代碼。第二次調(diào)用函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。

目的：節(jié)約性能開銷，避免多次頻繁的觸發(fā)業(yè)務(wù)邏輯造成頁面卡頓。

應(yīng)用場景：節(jié)流和防抖的核心其實(shí)就是限制某一個(gè)方法被頻繁觸發(fā)，
比如說DOM事件的監(jiān)聽回調(diào)，input的keyup、keydown，window.scroll,window.resize事件，按鈕連續(xù){{BANNED}}點(diǎn)擊導(dǎo)致無限制發(fā)送接口請求等應(yīng)用場景

防抖

一個(gè)需要頻繁觸發(fā)的函數(shù)，在規(guī)定的時(shí)間內(nèi)，只執(zhí)行最后一次，前面的觸發(fā)不執(zhí)行。(當(dāng)持續(xù)觸發(fā)事件的時(shí)候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結(jié)束的一段時(shí)間之后，再去執(zhí)行)

原理

第一次調(diào)用函數(shù)創(chuàng)建一個(gè)定時(shí)器，指定的時(shí)間間隔后運(yùn)行代碼。第二次調(diào)用函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。

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);

節(jié)流

一個(gè)函數(shù)執(zhí)行一次后只有大于設(shè)定的執(zhí)行周期才會(huì)執(zhí)行第二次。(指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù))

原理

用時(shí)間戳來判斷是否已到回調(diào)該執(zhí)行時(shí)間，記錄上次執(zhí)行的時(shí)間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時(shí)間戳距離上次執(zhí)行時(shí)間戳的間隔是否已經(jīng)到達(dá) 規(guī)定時(shí)間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時(shí)間戳，這樣循環(huán)下去

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);