Description
Utility module for debouncing user-interactions (or any other events).
Its main application are cases where expensive operations like updating or querying data are performed in response to some event like a user typing into a search box.
- debounce
- target ⟶ wrapper
- target, timeout ⟶ wrapper
-
A decorator function that takes a target function and returns a wrapper that will only call the target after a set timeout expires.
Repeatedly calling the wrapper while the timeout is running will reset the timeout without calling the target function.
Example
const update = value => expensive_operation(value)
input.addEventListener("change", debounce(event => update(input.value)))
This code will debounce the update event handler of an input element, calling the update
function only after no changes have been made for at least one second.
Methods
The returned wrapper function has two methods:
cancel()- Cancels the running timeout without calling the target function.
now(...)- Cancels the running timeout and calls the target function immediately.