The classic implementation keeps one timer ID per debounced function and clears it on every call. As long as new calls keep arriving inside wait milliseconds, the timer keeps getting reset, so fn only fires after the burst goes quiet. Using fn.apply(this, args) preserves both the original this (handy when the debounced function is a class method) and the most recent argument set, which is what users expect for search-as-you-type. This is the version to default to for input handlers and resize listeners.

Component unmount and route changes need to drop pending work to avoid setState after unmount or stale network writes. Exposing cancel clears the timer and forgets the queued args; flush runs the pending call immediately, which is what a Save button wants when the user navigates away. Keeping pendingArgs and pendingThis separate from the timer closure is what makes both controls clean to implement. Reach for this version inside React effects, Vue setup, or any place where teardown matters.

Async work like fetch plays badly with the classic debounce because callers expect a Promise back so they can await the result. This variant returns a Promise per call and resolves every queued caller with the SAME final result of the last invocation, which is exactly what type-ahead consumers want (intermediate calls don't fire their own request). Holding the resolver list separately from the timer closure means cancellation can later reject all pending Promises with AbortError if you extend the API. Use this whenever you debounce an async function and the result feeds back into UI state.