This lessons builds on Build lodash.debounce from scratch to add support for one of its more interesting options:
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
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.
setTimeoutreturns a timer ID not the actual timer object itself, which is why we have to
nullit out after we already call
- If you don't
maxTimerin 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.