快捷導(dǎo)航

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

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

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

概述

說明

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

函數(shù)防抖(debounce)

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

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

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

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

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

代碼

函數(shù)防抖

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

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

function debounce(fn) {
  let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
  return function () {
  clearTimeout(timeout); // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉
  timeout = setTimeout(() => { // 然后又創(chuàng)建一個(gè)新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會(huì)執(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)只會(huì)執(zhí)行一次，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率

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

function throttle(fn) {
  let canRun = true; // 通過閉包保存一個(gè)標(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)定時(shí)器沒有執(zhí)行的時(shí)候標(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));

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

您可能感興趣的文章: