In Javascript, we have basically two ways to schedule things. One is <code>setTimeout</code> and the other is <code>setInterval</code>. Suppose you have a scenario where you have to build a Search Autocomplete Component where once the user starts typing you can show thenm some auto-complete result based on the query. Now that seems easy as you can just add a <code>keyup</code> listener to the input and you can start firing the request to you backend. Suppose your search component searches for images by querying image description and a user type the query <code>a man sitting on a bench alone while it's raining</code> now guesses what will happen. As for every keystroke, we are firing requests and the above query’s length is 48, which means for every average query a search will call around 30 API calls. That’s obviously not very efficient. Isn’t it? So how can we solve the above problem by keeping in mind user experience as well as not making so many API calls? The answer is using <code>debounce</code> or using <code>throttling</code>. Let’s understand both by taking some examples
<h2>Debouncing</h2>
It is a way to decide how often you want a certain function to be called. In debouncing we have a delay parameter. Now when we call our debounced function it fires on the first go but is executed after the delay. Suppose, we have an autocomplete search then what debounced function will do is as we keep typing some query it doesn’t fire any request, while once we stopped typing then after the delay time the request gets fired off. Hence when using search auto-complete suppose a user wanted to search for <code>laptop 4gb ram 256 ssd</code>. So when the user types <code>laptop</code> and then waits for the delay time then the first API call happens with <code>laptop</code>, and then it populates some auto complete result like <code>laptop i5</code>, or <code>laptop 4gb ram</code>. Then again it follows the same process once the user types some other follow-up query and hence we limit the number of API calls as well as give a good user experience too.
Let’s implement a debounce function now. We should keep in mind that while writing our debounce function we will use the idea of closure to let our debouce function return another function which is debounced and has the delay time passed beforehand. The function signature and the usage is shown below.
<pre><code>// the function signature will look like this
function debounce(fn,time) : () => {}

const callApi = () => {
 console.log("api called");
}

const myDebouncedSearch = debounce(callApi,200);

// now we can use our debouncedSearch function by adding it to some event listener or stuff like that
</code></pre>
After looking at the code snippet you have got some idea what we will be going to do. So without wasting time let’s write our debounce function
<pre><code>function debounce(fn, time) {
 let timeoutId = null;
 return function (args) {
 if (timeoutId) {
 clearTimeout(timeoutId);
 }
 timeoutId = setTimeout(() => {
 fn(args);
 timeoutId = null;
 }, time);
 };
}

const callApi = (name) => {
 console.log(name, "called");
};

const myDebouncedSearch = debounce(callApi, 200);
// now we can use our debouncedSearch function by adding it to some event listener or stuff like that
myDebouncedSearch("dog");
myDebouncedSearch("cat");
myDebouncedSearch("rat");
myDebouncedSearch("mat");
myDebouncedSearch("fat");
myDebouncedSearch("bat"); // bat called
</code></pre>
Now let’s learn about the approach
<ol>
<li>First of all we have to just delay the function call for the given time so we used <code>setTimeout</code> for doing the same.</li>
<li>Now we have used the idea of closure to inject the delay time through our debounce function and then use it further by passing the arguments needed for the function call.</li>
<li>Now as we know in debounce only the last function is get called and all the previous one are get cancelled.</li>
<li>So keep a refrence of the function call we assigned our timer to some variable and then we check whether the variable is <code>null</code> or it is assigned some value. If there is some value for the timer varibble which is the <code>timerId</code> then we know some function is being executed and hence we clear that last function call by calling the <code>clearTimeout</code> and let the function call the last called function.</li>
<li>Finally we also set the variable storing timeoutId to <code>null</code> to preserve the intial state.</li>
</ol>
That’s all is for debouncing and you can clearly see how useful it is and there are so many usecase for it when we want to limit some function call.
<h3>Throttling</h3>
Throttling is also a similar concept which is used to limit function calls. However it has a slight difference, as in case of debounce only the last function gets called, in throttling we call the first function and unless the delay time has passed we execute the next called function. If there afe function calls before the delay time it gets ignored and doesn’t get called. Throttle is useful where some event get called very frequently. Suppose you want to track the user movement on your platoform and you’ve added a <code>mousemove</code> event on the view and fire some request based on the mouse move event. But you’ll notice that for tiny mouse movement the event gets called a lot of time. Hence in order to limit the API calls here we can throttle the API call based on some delay time. There are many such other case where you want to throttle the function call to limit certain things. Enough of words now let’s look at some code and implement throttle function.
<pre><code>// throttle function
function throttle(fn, time) {
 let timeoutId = null;
 return function (args) {
 if (timeoutId) {
 console.log("cancelled call", args); // added a log for testing
 return;
 }
 timeoutId = setTimeout(() => {
 fn(args);
 timeoutId = null;
 }, time);
 };
}

// for testing

const callApi = (name) => {
 console.log(name, "called");
};

const myThrottle = throttle(callApi, 200);

function simulateFiringEvents(num) {
 let i = 0;
 let interval = setInterval(() => {
 if (i === num) {
 clearInterval(interval);
 return;
 }
 myThrottle(i);
 i++;
 }, 5);
}

simulateFiringEvents(100);
</code></pre>
Now let’s learn about the approach
<ol>
<li>Here in throttle we check wheter there is timeoutId is not <code>null</code>. If it is not <code>null</code> then it means there is some function already being called and hence we just return from there without calling the function.</li>
<li>Now in the setTimeout we assign the timeoutId to <code>null</code> once the function is executed and hence we are able to let new function get called, and the same process goes on limiting subsequent call during the delay time.</li>
</ol>
This is all for throttling and you can really see how useful it is for various usecases. However there is more better implementation of debounce and throttle in libraries like <code>lodash</code> or <code>underscore</code> and they handle all the edge cases.
You can look at the source code to get a more cleared idea : <a href="https://github.com/lodash/lodash/blob/master/debounce.js">https://github.com/lodash/lodash/blob/master/debounce.js</a>
That’s all for today.
If you find this useful please share it or have some suggestion for improvement please react out to me on <a href="https://twitter.com/MobashirFarhan">Twitter</a>.

A brief explanation of debouncing and throttling in JavaScript

Debouncing and Throttling in JavaScript

A quick guide to types and coercion in JavaScript.

Types and Coercion in JS

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.

Introduction to Functional Programming

Hardtail is a data fetching library for React that allows you to fetch data in a declarative way.

Hardtail - A data fetching library for React

Ampere Social is a social media platform like Pinterest. It's built with React, Node, Express and MongoDB.

Ampere Social - A social media platform like Pinterest

Ampere-Doc is a note taking app. It's built with React, Node, Express and MongoDB.

m.

Mobashir Farhan

FrontEnd 🧑‍💻 | Javascript 🟨 | ReactJs ⚛️

Projects

These are some of the projects I have worked on

Hardtail - A data fetching library for React

Ampere Social - A social media platform like Pinterest

Ampere-Doc - A note taking app

Blogs

These are some of the blogs I have written on

Debouncing and Throttling in JavaScript

Types and Coercion in JS

Introduction to Functional Programming

Technologies I have worked with

These are the technologies I have worked with in the past