JavaScript: Throttling

In this article, we will check what is throttling and how it is different than debouncing.
Before that, if you don't know what is debouncing then,
I will suggest you read this article on Debouncing(UI interview question for Flipkart).

Throttling is a technique to control how many times a function to be executed over time.

Why it is important?

In 2011, Issue in the Twitter website,
when you were scrolling down your Twitter feed, it became slow and unresponsive.
John Resig published a blog post about the problem where it was explained how bad of an idea
it is to directly attach expensive functions to the scroll event.

John Resig: The creator of the most popular JavaScript library in the world: jQuery.

How it is different from Debouncing?

Well, the debouncing technique is useful for example like search bar in Flipkart, Amazon where we limit the API call to the server. If we are searching for some product and when we take pause(200ms) the API will get called.
(Only give an API call if the difference between 2 keypress event is some x seconds.)

Consider a use case where we are building a shooting game and there are 2 weapons(Guns)
like the machine gun and normal pistol.
Also, there is a fire button for these 2 weapons which fires a bullet.
Users will be constantly clicking the button.
Here we can use throttling.
Like fire function for a machine gun(As machine guns fire quickly) will be called only after 100ms with respective to previous call but the same function for pistol will be called after 800ms delay.
Here we can't use the debouncing approach.
Both the technique is used for controlling the expensive call to server but are used in different use cases.

Link to the code.
Video Link.

You Might Like:

Node.js interview questions set 1

Node JS: Understanding bin in package.json.

Node.js: Bundling your Node.js application to a single executable for Windows.

Node.js: Extract text from image using Tesseract.

Comments

Coding Interview Questions Set 1

From this article, I will be sharing with you all a series of articles on coding interview questions. So please stay connected for the latest set of questions. It will be a good brainstorming exercise and will also prepare you for coding interviews and will definitely boost your confidence. So let's start, 1)Reverse of a string with only O(1) extra memory. Solution: var reverse = function(string) { let result = '' for(let i= string.length -1; i >= 0; i--){ result += string[i]; } return result; }; 2)Fizz Buzz: Write a program that will accept a number n and will output number till n but for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. Solution: var fizzBuzz= function(n) { const arr=[] for(i=1; i<=n; i++){ ...

JavaScript: Debouncing | Flipkart UI Interview Question.

To understand this programming practice will go with a quick example. We all do online shopping and we do search for products on Flipkart on the search bar. So when we type on search bar i.e on every keypress we are actually giving API requests to the server, which in response gives us suggestions. Actually, it's a time-consuming task and may degrade the performance of the webpage. So to improve the performance we use debounce function which actually acts as a controller which reduces the API request to the server on keypress event. In simple terms, we are giving API request only after a certain amount of time between two keypress events. A debounce is a higher-order function. Higher-order function: A function that returns another function. Let's dive deep: HTML Code: <input type="text" onkeyup="searchProducts()"/> Consider this as a search bar for Flipkart. On any keypress, we are calling searchProducts() function. Javascri...

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency. It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...

Explore Learn and Grow

Search This Blog