Build Reactive Websites with RxJS

Debouncing Events

There comes a time when several events fire in a row, and we don’t want to do something on every event, but rather, when the events stop firing for a specified period. In the typeahead case, we only want to make requests when the user stops typing. A function set up in this way is known as a debounced function. To create such a debounced function, you pass a function into debounce, which then returns another function that wraps the original function:

let logPause = () => console.log('There was a pause in the typing');
// This won't work, it will log on every keystroke
// input.addEventListener('keydown', logPause);
// Instead, we debounce logPause
let logPauseDebounced = debounce(logPause);
input.addEventListener( ...