防抖(Debounce)和節(jié)流(Throttle)是兩種前端開發(fā)中常用的性能優(yōu)化技術(shù)，尤其在處理高頻觸發(fā)事件如滾動、調(diào)整窗口大小、輸入等場景中。傳統(tǒng)實現(xiàn)這些功能需要編寫復雜的函數(shù)，但隨著JavaScript的發(fā)展，我們現(xiàn)在可以通過更簡潔的方式實現(xiàn)這些功能。

傳統(tǒng)實現(xiàn)方式回顧

在深入新特性之前，讓我們先回顧一下傳統(tǒng)的防抖和節(jié)流實現(xiàn)方式：

傳統(tǒng)防抖實現(xiàn)：

function debounce(fn, delay) {
let timer = null;
returnfunction(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用示例
const handleSearch = debounce(function(e) {
console.log('搜索內(nèi)容:', e.target.value);
}, 300);

searchInput.addEventListener('input', handleSearch);

傳統(tǒng)節(jié)流實現(xiàn)：

function throttle(fn, delay) {
let lastTime = 0;
returnfunction(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

// 使用示例
const handleScroll = throttle(function() {
console.log('頁面滾動');
}, 200);

window.addEventListener('scroll', handleScroll);

JavaScript新特性：函數(shù)裝飾器

ECMAScript的提案中引入了函數(shù)裝飾器（Function Decorators），這是一種能夠在不修改原始函數(shù)的情況下增強函數(shù)行為的語法。

注意：截至2024年10月，函數(shù)裝飾器仍處于TC39提案階段，可能需要通過Babel或TypeScript等工具進行轉(zhuǎn)譯才能使用。

利用裝飾器實現(xiàn)一行防抖：

現(xiàn)代化解決方案

(1) 使用requestAnimationFrame實現(xiàn)的節(jié)流

瀏覽器的requestAnimationFrameAPI可以幫助我們實現(xiàn)一行代碼的節(jié)流效果：

(2) 利用AbortController實現(xiàn)簡潔防抖

(3) 使用Web Streams API實現(xiàn)防抖節(jié)流

隨著Web Streams API的成熟，我們可以利用它實現(xiàn)更聲明式的防抖和節(jié)流：

第三方庫的超簡化方案

如果您使用諸如Lodash、Underscore等工具庫，防抖節(jié)流變得極其簡單：

// Lodash
import { debounce, throttle } from 'lodash';

// 一行防抖
element.addEventListener('input', _.debounce(handleInput, 300));

// 一行節(jié)流
window.addEventListener('scroll', _.throttle(handleScroll, 200));

實際應用場景

• 搜索輸入框：防抖可以避免用戶每輸入一個字符就發(fā)送請求
• 窗口調(diào)整：節(jié)流可以限制布局重新計算的頻率
• 無限滾動：節(jié)流可以控制加載新內(nèi)容的頻率
• 游戲中的用戶輸入：確保按鍵響應不會過于頻繁
• 拖拽元素：平滑拖拽效果而不造成性能問題

性能比較

JavaScript的發(fā)展讓我們能夠用越來越簡潔的代碼實現(xiàn)防抖和節(jié)流功能。根據(jù)項目需求和瀏覽器兼容性要求，可以選擇最適合的實現(xiàn)方式。對于現(xiàn)代web應用，裝飾器和最新的Web API提供了簡潔優(yōu)雅的解決方案；而對于需要廣泛兼容的項目，傳統(tǒng)實現(xiàn)或借助成熟的第三方庫仍然是可靠的選擇。

無論選擇哪種方式，防抖和節(jié)流都是提升用戶體驗和應用性能的重要技術(shù)，值得每位前端開發(fā)者掌握。