快捷導(dǎo)航

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

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

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

引言

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

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

防抖

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

節(jié)流

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

實(shí)現(xiàn)防抖

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

下面是一個(gè)簡(jiǎn)單的防抖函數(shù)實(shí)現(xiàn)，用于延遲執(zhí)行函數(shù)，直到觸發(fā)動(dòng)作結(jié)束后等待指定的時(shí)間間隔再執(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í)行選項(xiàng)的防抖

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

function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果是立即執(zhí)行，并且沒有定時(shí)器，則直接調(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);

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

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

時(shí)間戳版本的節(jié)流是基于上一次執(zhí)行時(shí)間和當(dāng)前時(shí)間差來進(jìn)行判斷是否應(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);

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

另一種常見的節(jié)流實(shí)現(xiàn)方法是使用定時(shí)器，這種方式會(huì)在設(shè)定的時(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);

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

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

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

不同角度的功能使用思路

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

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

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

總結(jié)

到此這篇關(guān)于前端優(yōu)雅實(shí)現(xiàn)防抖和節(jié)流的文章就介紹到這了,更多相關(guān)前端實(shí)現(xiàn)防抖和節(jié)流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: