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

更新時間：2019年09月12日 17:00:24 作者：ajuan

這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

概述

說明

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

函數(shù)防抖(debounce)

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

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

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

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

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

代碼

函數(shù)防抖

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

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

function debounce(fn) {
  let timeout = null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
  return function () {
  clearTimeout(timeout); // 每當(dāng)用戶輸入的時候把前一個 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ā)事件時都判斷當(dāng)前是否有等待執(zhí)行的延時函數(shù)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: