Search⌘ K
AI Features
Home
Courses
Build Reactive Websites with RxJS: Master Observables and Wrangle

Adding Debounce to the Typeahead

Explore techniques to add debouncing to typeahead inputs using RxJS. Understand how debounceTime optimizes event flows, making code more readable, maintainable, and resilient to changes in asynchronous applications.

We'll cover the following...

One of the ways to determine the quality of code is to see how resilient the code is to change.

Debouncing time using vanilla code

Let’s see how the vanilla snippet fares when adding debouncing:

TypeScript 3.3.4
let latestQuery;
searchBar.addEventListener('keyup', debounce(event => {
  let searchVal = latestQuery = event.target.value;
  fetch(endpoint + searchVal)
  .then(results => {
    if (searchVal === latestQuery) {
      updatePage(results);
    }
  });
}));

Not much of a change, though it’s easy to miss the fact that the event function is debounced, which may lead to confusion ...