Implement a throttle function

Mar 26, 2024

Throttling is a technique used to control how many times we allow a function to be executed over time.

When a JavaScript function is said to be throttled with a wait time of X milliseconds, it can only be invoked at most once every X milliseconds.

The callback is invoked immediately and cannot be invoked again for the rest of the wait duration.

From my personal experience, the implementation of debouncing with following variations are usally asked:

Variation: Basic implementation

1. Basic throttle implementation

export default function throttle(func, wait) {
  let timerId = null;
  let isThrottled = false;

  function throttledFnImpl(...args) {
    if (isThrottled) {
      return;
    }

    func.call(this, ...args);
    isThrottled = true;

    timerId = setTimeout(() => {
      timerId = null;
      isThrottled = false;
    }, wait);
  }

  return throttledFnImpl;
}

// Usage of throttle function
const throttledFn = throttle(() => {
  console.log('I am called');
}, 1000);

const button = document.getElementById('button');
input.addEventListener('click', throttledFn);

Variation: With Last Result

2. Variation with last result

In this variation it is expected that during the throlling period if the function is invoked again, we simply return the last result.

export default function throttle(func, wait) {
  let timerId = null;
  let isThrottled = false;
  let lastResult = undefined;

  function throttledFnImpl(...args) {
    if (isThrottled) {
      // return last result instead of undefined
      return lastResult;
    }

    // store the result for every invocation
    lastResult = func.call(this, ...args);
    isThrottled = true;

    timerId = setTimeout(() => {
      timerId = null;
      isThrottled = false;
    }, wait);
  }

  return throttledFnImpl;
}

// Usage of throttle function
const throttledFn = throttle(() => {
  console.log('I am called');
}, 1000);

const button = document.getElementById('button');
input.addEventListener('click', throttledFn);

Implement a throttle function

1. Basic throttle implementation

2. Variation with last result

Further Reading