Debouncing and Throttling in JS

why we use Debouncing ?

In order to optimize the performance of the application, we want to optimize the code by avoiding repetitive call of some of the functions!

Avoiding unwanted call in application!!

Example! In the Flipkart/Amazon or other website when we write on the search bar, there is small delay after which the results show! means there must be a function call on the result logs. Basically here we can see that this search function is not called with every key stroke, Rather it waits for some time till user is typing!

function getData(){
  console.log('gettting data')
}

function debounce(call, delay){
  let timer;
  return function(...args){
    if (timer) clearTimeout()
    timer = setTimeout(()=>{
      call();
    },delay)
  }
}

const debounceFunc = debounce(getData, 1000)

Hook this debounceFunc in the html input for on change as follows

<input type="text" onchange="debounceFunc()"/>

Now this will return input just after on sec delay after the user finish typing! , However if we want to get data after 1 sec delay of every keystroke input we simply do this.

<input type="text" onkeyup = "debounceFunc()"/>

Why using Throttling ?

To understand this, let us take a use-case. Suppose we have a feature on a website, where we click a button to throw some data into the database!. But now suppose users mouse is faulty and sometimes user click only once but it happens twice. So when user clicked the button, the click happens two times before the task was complete and due to the another click the task restarted from beginning, So to avoid this problem, we want to make this button disable until let us say 5 sec. How can we achieve that?

const throttleFunc = throttle(clicked,5000)

function clicked(){
  document.getElementById('btn-throttle').disabled = false; // makes button live when this is called!
  console.log("I am Clicked")
};

function throttle(call, delay){
  return function(...args){
  document.getElementById('btn-throttle').disabled = true; // as soon as the button was clicked, The button went disabled!

  setTimeout(()=>{
    call() //This will call the function clicked after 5 sec delay
  },delay)
  }
}

Difference between Debouncing and throttling

• Throttling limits the execution of a function to a certain time frame, ensuring it's not called more than once in that timeframe.
• Debouncing ensures a function is only executed after a certain period of inactivity, waiting for a "quiet" period before triggering the function.

However,
Both throttling and debouncing are used to improve performance and control the frequency of function execution, especially in scenarios where rapid or frequent events may cause performance issues or unnecessary computation.

Use-Cases

Throttling:

1. Online Gaming: Throttle user input events to prevent rapid or excessive commands from overwhelming the game server, ensuring fair and consistent gameplay for all participants.
2. Real-Time Applications: Throttle data updates or notifications to prevent the server from being flooded with rapid updates, ensuring that clients receive a consistent stream of information without overwhelming network resources.
3. API Requests: Throttle API requests to limit the frequency of client requests to the server, preventing unnecessary strain on the server and ensuring fair access to resources for all users.

Debouncing:

1. Autosave in Text Editors: Debounce user typing events in text editors to avoid triggering frequent autosave requests, ensuring that autosave operations are performed only after the user has finished typing or during short periods of inactivity.
2. Search Suggestions: Debounce search input events to limit the frequency of requests to the server for search suggestions, providing a smoother and more efficient search experience for users.
3. Form Inputs and Validation: Debounce form input events and validation checks to prevent immediate validation checks for each keystroke, reducing unnecessary UI updates and providing a more seamless form filling experience for users.

By leveraging throttling and debouncing in these real-world scenarios, developers can effectively manage the rate of function execution and optimize the overall performance of their applications, leading to a more efficient and user-friendly experience for their users.