快捷導(dǎo)航

前端優(yōu)雅實現(xiàn)防抖和節(jié)流的幾種方法示例

更新時間：2025年01月15日 11:11:26 作者：DTcode7

這篇文章主要介紹了防抖和節(jié)流兩種優(yōu)化前端事件處理的技術(shù),詳細解釋了它們的基本概念和應(yīng)用場景,通過示例代碼展示了防抖和節(jié)流的實現(xiàn)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

引言

在Web前端開發(fā)中，我們常常會遇到需要限制函數(shù)執(zhí)行頻率的場景。比如，在用戶快速連續(xù)點擊按鈕、窗口調(diào)整大小、滾動頁面或者輸入框文本變化時，如果不對這些事件進行處理，可能會導(dǎo)致過多不必要的計算或請求，從而影響用戶體驗甚至造成性能問題。為了解決這些問題，我們可以使用防抖（Debouncing）和節(jié)流（Throttling）這兩種技術(shù)來優(yōu)化代碼的響應(yīng)方式。

防抖與節(jié)流的基本概念和作用

防抖

防抖指的是將多次觸發(fā)的事件合并為一次執(zhí)行。它適用于那些我們只關(guān)心最后一次觸發(fā)的場景，例如搜索框中的自動補全功能，我們只需要在用戶停止輸入后發(fā)送一次請求獲取結(jié)果，而不是每次輸入一個字符都發(fā)送請求。這樣可以減少服務(wù)器的壓力，同時提高應(yīng)用的響應(yīng)速度。

節(jié)流

節(jié)流則是指在一段時間內(nèi)，不論觸發(fā)了多少次事件，只會執(zhí)行一次相應(yīng)的操作。這在一些高頻事件如滾動、窗口大小改變等場景下非常有用，通過限制事件處理函數(shù)的執(zhí)行頻率，可以避免因過于頻繁的操作而導(dǎo)致的性能下降。

實現(xiàn)防抖

示例一：基礎(chǔ)防抖實現(xiàn)

下面是一個簡單的防抖函數(shù)實現(xiàn)，用于延遲執(zhí)行函數(shù)，直到觸發(fā)動作結(jié)束后等待指定的時間間隔再執(zhí)行：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 使用示例
const inputHandler = debounce((event) => {
  console.log('Input value:', event.target.value);
}, 300);

document.getElementById('search').addEventListener('input', inputHandler);

示例二：帶立即執(zhí)行選項的防抖

有時候我們希望在第一次觸發(fā)事件時立即執(zhí)行函數(shù)，之后的行為按照正常的防抖邏輯處理?？梢酝ㄟ^添加一個立即執(zhí)行的標志位來實現(xiàn)這個需求：

function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果是立即執(zhí)行，并且沒有定時器，則直接調(diào)用函數(shù)
      const callNow = !timeout;
      timeout = setTimeout(() => timeout = null, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(() => func.apply(context, args), wait);
    }
  };
}

// 使用示例
const resizeHandler = debounce(function() {
  console.log('Window resized');
}, 200, true); // 立即執(zhí)行一次，后續(xù)按照防抖邏輯

window.addEventListener('resize', resizeHandler);

實現(xiàn)節(jié)流

示例三：時間戳版節(jié)流

時間戳版本的節(jié)流是基于上一次執(zhí)行時間和當前時間差來進行判斷是否應(yīng)該執(zhí)行函數(shù)的：

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
const scrollHandler = throttle(() => {
  console.log('Scrolled');
}, 1000); // 每秒最多執(zhí)行一次

window.addEventListener('scroll', scrollHandler);

示例四：定時器版節(jié)流

另一種常見的節(jié)流實現(xiàn)方法是使用定時器，這種方式會在設(shè)定的時間間隔內(nèi)阻止函數(shù)被重復(fù)調(diào)用：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
const clickHandler = throttle(() => {
  console.log('Button clicked');
}, 500); // 每500毫秒最多執(zhí)行一次

document.getElementById('myButton').addEventListener('click', clickHandler);

示例五：高級節(jié)流與防抖結(jié)合

有時候我們需要根據(jù)具體情況靈活運用節(jié)流和防抖。例如，對于無限滾動加載更多內(nèi)容的場景，我們可以在用戶接近頁面底部時開始節(jié)流，而在用戶完全停止?jié)L動后利用防抖機制來發(fā)起加載新數(shù)據(jù)的請求：

function loadMoreData() {
  console.log('Loading more data...');
  // 模擬加載數(shù)據(jù)
}

let isFetching = false;

function handleScroll() {
  if (isFetching) return;
  
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    isFetching = true;
    // 結(jié)合節(jié)流和防抖
    const throttledAndDebouncedLoad = throttle(debounce(loadMoreData, 300), 1000);
    throttledAndDebouncedLoad();
  }
}

window.addEventListener('scroll', handleScroll);

不同角度的功能使用思路

除了上述基本的實現(xiàn)方式，還可以考慮在實際項目中根據(jù)具體需求對防抖和節(jié)流進行擴展。例如，可以通過配置項來自定義行為，或者在某些情況下取消防抖/節(jié)流效果。此外，也可以探索與框架如React、Vue或Angular結(jié)合使用，利用其生命周期鉤子來更高效地管理事件處理函數(shù)。

在開發(fā)過程中，開發(fā)者還應(yīng)注意到瀏覽器兼容性的問題，確保所使用的特性能夠在目標環(huán)境中正常工作。另外，考慮到移動端設(shè)備的特殊性，可能還需要針對觸摸事件進行專門的處理，以提供更好的用戶體驗。

作為Web前端開發(fā)人員，理解并熟練掌握防抖和節(jié)流的概念及其多種實現(xiàn)方式，能夠幫助我們在構(gòu)建高性能、響應(yīng)迅速的應(yīng)用程序時做出更加明智的選擇。通過對這些技術(shù)的深入研究和實踐，我們不僅可以提升個人技能，也能夠為團隊帶來更大的價值。