[Javascript] Extending debounce with a maxWait Option

This lessons builds on Build lodash.debounce from scratch to add support for one of its more interesting options: maxWait. The maxWait option ensures that a debounced method is deferred no longer than the time specified. This is helpful if we need to respond to a long running interaction while it's still in progress.

In this lesson we'll demonstrate how continuously typing into a debounced input field prevents us from logging any input at all. We'll add a maxWait option as a third parameter to our debounce function and set it up using an additional setTimeout call.

Essentially maxWait works by adding a second timer which will fire in the case that the normal debounce timer does not get called. We avoid unnecessarily triggering our debounced function by calling clearTimeout in both of our setTimeout functions to clear out whichever timer didn't just fire. We also need to set the maxTimer variable to null to tell our function it's safe to start a new maxWait timer each time either timer fires.

Notes

• setTimeout returns a timer ID not the actual timer object itself, which is why we have to null it out after we already call clearTimeout
• If you don't null out maxTimer in your original timer, the maxWait timer will stop triggering after the debounce timer is called the first time. I learned that one the hard way when I first recorded this video.

const debouncedLog = debounce(log, 4000, { maxWait: 1000 });
debouncedLog("zhen");

function debounce(fn, wait, { maxWait } = {}) {
  let timer, maxTimer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      clearTimeout(maxTimer);
      fn.apply(null, args);
    }, wait);

    if (maxWait && !maxTimer) {
      maxTimer = setTimeout(() => {
        clearTimeout(timer);
        maxTimer = null;
        fn.apply(null, args);
      }, maxWait);
    }
  };
}

module.exports = { debounce };