Hey there, welcome to the blog.

Today we gonna see what is debouncing and how it is rocking in the javascript world.

So debounce helps to trigger code in certain time. like autosave, suggestions

So in amazon or flipkart whever we are searching anything. Once you start typing something It will suggest something based on the thing we have written, like if you type la or lap then it will suggest something like laptop and each keystroke you are making, the api is being called but it will be very expensive network calls on each keystrokes, so they wait for sometime once you start typing or the api call will made once you stop typing so the function of api call will be delay and it is called debouncing.

even i am writing this blog on hashnode, It has autosave feature and it is autosaving my blog once i stop writing. you can see the network calls in network tab in your browser's console menu. (press f12 or ctrl+shift+i).

So let's say we have an input box and we are doing some operation based on typing.

<input type="text" id="input-box" />

So here is the input box and we will grab the id of this input box and will attach the event to it. in our case we will attach keyup event to the input box.

let inputBox = document.getElementById('input-box');

inputBox.addEventListener('keyup',debounceSomething);

In above example we have grab the input by using it's Id and we have attached a function which is called as debounceSomething.

So here is the code for debounceSomething.

let delay = 300;
const debounceSomething = debounce(printSomething,delay)

Here we just made a function using es6 syntax and we also have declared a variable for time delay.

debounce function is having two arguments, first one is function to call and second once it time delay, bases on this it will return a new function which we are assigning to debounceSomething.

const debounce = (fn,delay) =>{
  let timer;
  let context = this;
  return function(...args){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      fn.apply(context,args);
    },delay)
  }
}

debounce function is returning another function and we have used setTimeout API to delay some time. and then we are calling the function which is passed in argument.

Here we could have called a function directly using fn(). but we have uses fn.apply() because we want to the context of function itself (not in every case, it will work fine without apply as well or we can use fn.call()), otherwise it will create a context issue in setTimeout.

so the final code will look like this.

let delay = 300;
const printSomething = () => {
  console.log("calling an api");
}
const debounce = (fn,delay) =>{
  let timer;
  let context = this;
  return function(...args){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      fn.apply(context,args);
    },delay)
  }
}
const debounceSomething = debounce(printSomething,delay)

let inputBox = document.getElementById('input-box');

inputBox.addEventListener('keyup',debounceSomething);

If you try this code then you will see that it will print whatver we have written in console.log in after certain amount of time.

This is the complete code of debouncing, and of course you can also cover some edge cases but i tried to cover them up like context or argument issues.

Hope you found this useful or if you still have any doubt then let me know in the comment section, I would be happy to help.

Thanks and see you again :)