How to Use Debounce and Throttle in JavaScript

Use JavaScript methods you may not be using

Photo by Balázs Kétyi on Unsplash.

Have you ever experienced your page getting very slow when you scroll down or run some animation?

When I used to work on the Canvas animation for dashboards, it required a lot of CPU resources just to represent the animation every second smoothly. Then one day, a new requirement was added: The tooltip should be shown once your mouse cursor hovers over the Canvas. This was really killing me. My CPU’s resources were so depleted that my computer was kind of frozen.

After a while, I learned a workaround for this problem: throttle or debounce. So in this article, I want to share what they are and why they are useful.

Prior to Reading

If you know how JavaScript’s asynchronous functions and HOF work under the hood, you could accept this theory more easily. You might be interested in my other articles about JavaScript events and the HOF.

An Example of the Problem

Let’s say you want to search a country name through the API call. There’s an input box on the screen in which you can put the strings of the country name. Once you put the strings in it, your application hits the API call to load all the countries that include…