Debouncing, and web performance

Debouncing is a important when you are making a scalable web product and going to JavaScript interview.

Introduction

Debouncing, is an important practice which is used very often by web developers to improve the performance of browser.

Debounce methods do not execute when invoked. Instead, they wait for a predetermined time before executing. If the same method is called again, the previous is cancelled and the timer restarts.

Example
Consider the example in this the function associated to the button will be called 2 sec after the button is pressed. No matter how many times you press is continuously it will be executed once.

Let us understand the code

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;

    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;

    clearTimeout(timeout);

    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);
  };
};

Here the debounce function takes three argument

1. The function which needs to be executed.
2. The wait time.
3. do you want to invoke this immediately (optional).

we can also implement this in react very easily with help of lodash

Consider someone is building a search application making an api call after every key stroke. consider this example with help of debouncing you can visualize the difference between events fired.

Let's understand the code

 onSearchItemWithDebounce = debounce((query) => {
    this.setState({
      queryWithDebounce: query
    }, () => {
      //Do Stuff after state is updated.
      console.log('search with Debounce: ', this.state.queryWithDebounce);
    })
    this.setState({eventsFiredDebounce : this.state.eventsFiredDebounce+ 1})
  }, WAIT_TIME);

**Note : debounce is imported from lodash**

Thanks for Bearing,
I will be writing articles explaining each hook provided by react in upcoming articles please follow to stay connected.