Skip to main content

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

Post a Comment

Popular posts from this blog

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...
Post a Comment
Read more

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...
1 comment
Read more

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...
Post a Comment
Read more