Lesson 32-In-Depth Analysis of JavaScript Debouncing and Throttling

Concepts and Differences Between Debouncing and Throttling

Basic Concepts

Debouncing and Throttling are two common front-end performance optimization techniques used to control the frequency of function execution, particularly when handling high-frequency events (e.g., scrolling, window resizing, input field typing).

• Debouncing: Executes a callback function after a delay of n seconds following an event trigger. If the event is triggered again within this n-second period, the timer resets. It can be understood as “wait for a period before executing, and restart waiting if triggered again during that period.”
• Throttling: Ensures a function is executed only once within a specified time interval. If the function is triggered multiple times within that interval, only one execution takes effect. It can be understood as “execute once at fixed intervals.”

Application Scenarios Comparison

Core Differences

1. Trigger Timing:
   • Debouncing: Executes n seconds after the event stops being triggered.
   • Throttling: Executes once at fixed time intervals.
2. Execution Frequency:
   • Debouncing: May execute only once after a long period of continuous triggers.
   • Throttling: Guarantees execution at least once per fixed interval.
3. Applicability:
   • Debouncing suits “wait for completion” scenarios.
   • Throttling suits “ensure frequency” scenarios.

Debouncing Implementation and Optimization

Basic Debouncing Implementation

function debounce(func, delay) {
  let timer = null;

  return function(...args) {
    // Clear previous timer
    clearTimeout(timer);

    // Set new timer
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Usage example
const handleInput = debounce(function(e) {
  console.log('Input value:', e.target.value);
}, 500);

document.getElementById('search-input').addEventListener('input', handleInput);

function debounce(func, delay) {
  let timer = null;

  return function(...args) {
    // Clear previous timer
    clearTimeout(timer);

    // Set new timer
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Usage example
const handleInput = debounce(function(e) {
  console.log('Input value:', e.target.value);
}, 500);

document.getElementById('search-input').addEventListener('input', handleInput);

Immediate Execution Debouncing

Sometimes, we need the function to execute immediately on the first trigger and then wait for the delay before executing again.

function debounceImmediate(func, delay, immediate = true) {
  let timer = null;

  return function(...args) {
    const context = this;

    // Clear existing timer if set
    if (timer) clearTimeout(timer);

    // Immediate execution mode and no timer
    if (immediate && !timer) {
      func.apply(context, args);
    }

    // Set new timer
    timer = setTimeout(() => {
      // Execute function if not in immediate mode
      if (!immediate) {
        func.apply(context, args);
      }
      timer = null;
    }, delay);
  };
}

// Usage example
const handleSearch = debounceImmediate(function(e) {
  console.log('Search for:', e.target.value);
}, 500, true);

document.getElementById('search-input').addEventListener('input', handleSearch);

function debounceImmediate(func, delay, immediate = true) {
  let timer = null;

  return function(...args) {
    const context = this;

    // Clear existing timer if set
    if (timer) clearTimeout(timer);

    // Immediate execution mode and no timer
    if (immediate && !timer) {
      func.apply(context, args);
    }

    // Set new timer
    timer = setTimeout(() => {
      // Execute function if not in immediate mode
      if (!immediate) {
        func.apply(context, args);
      }
      timer = null;
    }, delay);
  };
}

// Usage example
const handleSearch = debounceImmediate(function(e) {
  console.log('Search for:', e.target.value);
}, 500, true);

document.getElementById('search-input').addEventListener('input', handleSearch);

Debouncing with Cancel Functionality

function debounceWithCancel(func, delay) {
  let timer = null;

  const debounced = function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };

  // Add cancel method
  debounced.cancel = function() {
    clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

// Usage example
const debouncedFn = debounceWithCancel(function() {
  console.log('This will be executed after delay');
}, 1000);

document.getElementById('btn').addEventListener('click', debouncedFn);

// Cancel when needed
document.getElementById('cancel-btn').addEventListener('click', function() {
  debouncedFn.cancel();
});

function debounceWithCancel(func, delay) {
  let timer = null;

  const debounced = function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };

  // Add cancel method
  debounced.cancel = function() {
    clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

// Usage example
const debouncedFn = debounceWithCancel(function() {
  console.log('This will be executed after delay');
}, 1000);

document.getElementById('btn').addEventListener('click', debouncedFn);

// Cancel when needed
document.getElementById('cancel-btn').addEventListener('click', function() {
  debouncedFn.cancel();
});

Debouncing Performance Considerations

1. Timer Management: Ensure previous timers are correctly cleared.
2. this Binding: Use apply or call to maintain the correct this context.
3. Parameter Passing: Use rest parameters (...) to ensure all arguments are passed correctly.
4. Memory Leaks: Cancel pending debounced functions when components are unmounted (e.g., in React’s useEffect cleanup function).