深入了解JavaScript 防抖和節(jié)流

概述

說明

在項目過程中，經(jīng)常會遇到一個按鈕被多次點擊并且多次調(diào)用對應處理函數(shù)的問題，而往往我們只需去調(diào)用一次處理函數(shù)即可。有時也會遇到需要在某一規(guī)則內(nèi)有規(guī)律的去觸發(fā)對應的處理函數(shù)，所以就需要使用到函數(shù)防抖與函數(shù)節(jié)流來幫助我們實現(xiàn)我們想要的結果以及避免不必要的問題產(chǎn)生。

函數(shù)防抖(debounce)

定義：當持續(xù)觸發(fā)事件時(如連續(xù)點擊按鈕多此)，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設定的時間到來之前，有一次觸發(fā)了事件，就重新開始延時。

原理：維護一個計時器，規(guī)定在延時時間后觸發(fā)函數(shù)，但是在延時時間內(nèi)再次被觸發(fā)的話，就取消之前的計時器而重新設置，這樣就能夠保證只有最后一次操作被觸發(fā)。即將所有操作合并為一個操作進行，并且只有最后一次操作是有效操作。

函數(shù)節(jié)流(throttle)

定義：當持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)，按照一定的規(guī)律在某個時間間隔內(nèi)去處理函數(shù)。

原理：原理是通過判斷是否達到一定時間來觸發(fā)函數(shù)，使得一定時間內(nèi)只觸發(fā)一次函數(shù)。

代碼

函數(shù)防抖

觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間

每次觸發(fā)事件時都取消之前的延時調(diào)用方法

function debounce(fn) {
  let timeout = null; // 創(chuàng)建一個標記用來存放定時器的返回值
  return function () {
  clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
  timeout = setTimeout(() => { // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會執(zhí)行 fn 函數(shù)
    fn.apply(this, arguments);
  }, 500);
  };
}
function sayHi() {
  console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

函數(shù)節(jié)流

高頻事件觸發(fā)，但在n秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率

每次觸發(fā)事件時都判斷當前是否有等待執(zhí)行的延時函數(shù)

function throttle(fn) {
  let canRun = true; // 通過閉包保存一個標記
  return function () {
  if (!canRun) return; // 在函數(shù)開頭判斷標記是否為true，不為true則return
  canRun = false; // 立即設置為false
  setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
    fn.apply(this, arguments);
    // 最后在setTimeout執(zhí)行完畢后再把標記設置為true(關鍵)表示可以執(zhí)行下一次循環(huán)了。當定時器沒有執(zhí)行的時候標記永遠是false，在開頭被return掉
    canRun = true;
  }, 500);
  };
}
function sayHi(e) {
  console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。