Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Adding Debounce to the Typeahead

Adding Debounce to the Typeahead

Let's see how Rx makes our life peaceful and how easy it is to add a debounced function using Rx compared to the vanilla JavaScript code.

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:

Press + to interact
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 ...