What Is Debouncing, Why You Need It & How To Implement It In Javascript

Debouncing is a term very often used by web developers. if you are a beginner you might get confused by it. In this article, I will explain you what exactly is debouncing, why you need it, when to use debouncing & how to implement it in javascript. so let’s get started

What Is Debouncing ?

 “debouncing is any kind of hardware device or software that ensures that only a single signal will be acted upon for a single opening or closing of a contact.”

source

In Simple Term,

debouncing is a programming technique to delay the execution Of Code.

Why We Need Debouncing ?

If you run heavy time-consuming operations so often which does the same thing that decreases performance significantly. to prevent such situations we use a technique called debouncing. where we only execute code if another call doesn’t occur in a given time. means delaying execution if another execution request occurs.

Example To Implement Debouncing

Simple Explanation OF Above Example

 In the above example no matter how many times you click the button HeavyTask function will only be executed after 500 milliseconds after the last click or the difference between two clicks is more than 500 seconds.

Here we ensure that if the button is clicked we will execute the HeavyTask function after 500 milliseconds but in meantime again button is clicked we cancel HeavyTask execution &  call the HeavyTask function after 500 milliseconds. If Again button is clicked we repeat the above.

When To Use Debounceing Or Use Cases For Debouncing

  • Input Validation
  • Search Suggestions
  • Auto Saving Functionality
  • Animation
  • Event handling

Debounce Implementation In Different Libraries.

Some OF the Famous javascript libraries like lodash, jquery, underscore come with debounce functionality so you don’t need to implement it by yourself.

Implementing Debouncing in loadash.

    _.debounce(yourFunction,delay)        

Implementing Debouncing in underscore

    _.debounce(yourFunction,delay)        

 Implementing Debouncing in jquery

    $.debounce(delay,yourFunction)

Hey, readers Congratulation you just learnt debouncing & its use. I hope you like this article. if you have any doubt, suggestions or feedback feel free to comment below.

   

By Parth Maheta

Hey,
Welcome TO My BLog
I Am Parth Maheta. I am 21 years old from India. I am a web developer. In my free time, I write here about technologies, computers, internet & programming.

Leave a Reply

Your email address will not be published.