Mastering Debounce & Throttle: Modern JavaScript Techniques & Code Samples

Debounce (防抖) and throttle (节流) are common front‑end performance‑optimization techniques for high‑frequency events such as scrolling, resizing, or input.

Traditional Implementation Review

Traditional Debounce Implementation

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
// Usage example
const handleSearch = debounce(function(e) {
  console.log('搜索内容:', e.target.value);
}, 300);
searchInput.addEventListener('input', handleSearch);

Traditional Throttle Implementation

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}
// Usage example
const handleScroll = throttle(function() {
  console.log('页面滚动');
}, 200);
window.addEventListener('scroll', handleScroll);

JavaScript New Feature: Function Decorators

ECMAScript proposals introduce function decorators, a syntax that can enhance a function’s behavior without modifying the original function.

Note: As of October 2024, decorators are still at the TC39 proposal stage and may require Babel or TypeScript for transpilation.

One‑line Debounce with a Decorator

Modern Solutions

Throttle Using requestAnimationFrame

The browser’s requestAnimationFrame API can provide a one‑line throttle that syncs with the rendering cycle.

Concise Debounce with AbortController

Debounce & Throttle via Web Streams API

With the mature Web Streams API, developers can implement declarative debounce and throttle logic.

Third‑Party Library Ultra‑Simplified Solutions

If you use utility libraries such as Lodash or Underscore, debounce and throttle become extremely simple.

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

// One‑line debounce
element.addEventListener('input', _.debounce(handleInput, 300));

// One‑line throttle
window.addEventListener('scroll', _.throttle(handleScroll, 200));

Practical Application Scenarios

Search input : debounce prevents a request on every keystroke.

Window resize : throttle limits layout recalculations.

Infinite scroll : throttle controls loading frequency.

Game input : ensures key responses aren’t overly frequent.

Drag elements : smooth dragging without performance issues.

Performance comparison shows traditional functions are widely compatible but verbose; decorators offer concise syntax but need transpilation; requestAnimationFrame aligns with rendering for optimal speed; AbortController provides clear cancellation; Web Streams are powerful yet complex; third‑party libraries are simple but add dependencies.

JavaScript’s evolution enables increasingly concise implementations of debounce and throttle. Choose the method that fits project requirements and browser compatibility: modern APIs and decorators for elegant solutions, or traditional code and trusted libraries for broad support.

Regardless of the approach, mastering debounce and throttle is essential for improving user experience and application performance.