Debouncing HTTP requests using RxJS

In the previous recipe, we learned how to use the switchMap operator to cancel previous HTTP calls if a new HTTP call comes. This is fine, but why even send multiple calls when we can use a technique to wait a while before we send an HTTP call? Ideally, we'll just keep listening to duplicate requests for a period of time and will then proceed with the latest request. In this recipe, we'll be using the debounceTime operator to make sure we're only sending the HTTP call when the user stops typing for a while.

Getting ready

The project that we are going to work with resides in chapter05/start_here/using-debouncetime-operator, inside the cloned repository.

1. Open the project in VS Code.
2. Open the Terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, and you should see something like this:

Figure...