Debounce function

OSCC · JavaScript, Function · Oct 13, 2021

Creates a debounced function that delays invoking the provided function until at least ms milliseconds have elapsed since its last invocation.

  • Each time the debounced function is invoked, clear the current pending timeout with clearTimeout(). Use setTimeout() to create a new timeout that delays invoking the function until at least ms milliseconds have elapsed.
  • Use Function.prototype.apply() to apply the this context to the function and provide the necessary arguments.
  • Omit the second argument, ms, to set the timeout at a default of 0 ms.
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};
window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // Will log the window dimensions at most every 250ms

Recommended snippets

  • Delay function execution

    JavaScript, Function

    Invokes the provided function after ms milliseconds.

  • Throttle function

    JavaScript, Function

    Creates a throttled function that only invokes the provided function at most once per every wait milliseconds

  • Debounce promise

    JavaScript, Function

    Creates a debounced function that returns a promise.