Performance Optimization Techniques

What performance technique does this code implement?

const debounce = (fn, delay) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

window.addEventListener('resize', debounce(function() {
  // Recalculate layout
  console.log('Window resized');
}, 200));

Event delegation
Debouncing
This code implements debouncing, a performance optimization technique that limits how often a function can be called. Debouncing ensures that a function won't be executed until a certain amount of time has passed without it being called again. In this example, the resize handler won't execute until the user has stopped resizing for at least 200 milliseconds. This is particularly valuable for performance-intensive operations triggered by frequent events like window resizing, scrolling, or keyboard input. Debouncing differs from throttling (which ensures a function is called at most once in a specified time period) and is ideal for scenarios where you only care about the final state after a series of events. It significantly reduces unnecessary calculations, rendering, or API calls during rapid successive events.
Throttling
Memoization

Next Question (27/40)