Performance is something that everybody wants , either we talk about cricket match or our webapp. So for cricket match our INDIA team will handle that department, I will talk about one of the topic that will increase the performance of webapp. Topic is THROTTLING.

What is throttling?

Throttling is the concept that is used to limit the number of a function call in a certain time period. It also ensure that the function runs at a consistent rate. Let us understand this with a little example. Suppose you have to visit a doctor and you went to hospital, receptionist ask to you wait for some time as doctor is already busy with another patient. Hypothetically let us assume that doctor takes 30 min on one patient. Now no matter what you will be allowed to go inside to the doctor cabin after 30 min only if you keep on asking from the receptionist to go , you won't be allowed to. This is what throttling concept is, no matter how many time user run that particular function but it will only run after a particular time.

Working of throttling in Javascript

Let's take an example of how this work in Javascript. Assume we have a mousemove event and we want to execute some code on mousemove event. After once I have dragged mouse over the screen Let see what happen if we drag the mouse 5-6 times This is what happens, it ran for almost 101 times and now suppose there is some heavy code is written in the function call of mousemove function, then this will result in performance issue. Now lets's see what happen if we use throttle concept. Clearly we can see the difference and we can see how this throttle function can help in performance booster. Below is the implementation of Throttling in Javascript

function throttle(func, wait) {
   return () => {

  }
}

This is the first step, we know that throttle function will take a function that we want to execute after a particular time or we can say we have to pass a function that we want to throttle.

function throttle(func, wait) {
  let waiting = false;

  return (...args) => {
    //If waiting is true then we just have to ignore the more function call
    if (waiting) {
      return;
    }

    //if waiting is false then we have to straight away execute the function and put the waiting = true
    func(...args);
    waiting = true;

    //After waiting for the time provided we have to update the waiting to false, so that we can take the new
    //function call
    setTimeout(() => {
      waiting = false
    }, wait)
  }
}

//Calling the function
const throttled = throttle(() => { console.log('throttling....') , 1000})
throttled();

Here we have a waiting variable that will make sure that if the new function that come is ready to execute or it has to wait. Now in the function return call if waiting is true then we have to simply return i.e we are simply rejecting the function call to move further. On the other side if waiting is false then we have to straight away execute the function and make the waiting variable to true. Now that waiting variable will be set to true after particular time that is decided by the developer.

Now their is something to note about the above implementation. Suppose the delay time is 2sec and function is executed 5 times between 2sec, now according to the above implementation our function will execute only once because no function was called after 2sec, but in actual we want to execute that particular event even for the latest function call so that nothing is missed because this was the last call that user have made.

So let's make some changes to above call

function throttle(func, wait) {
  // your code here
  let waiting = false;
  let waitingArgs = null; //A new variable to keep record for the latest functiion call

//Understand this function call after reading the below code
  const timeoutFun = () => {
  //If we have nothing in our waitingArgs then simply make waiting variable to false
    if (waitingArgs == null) {
      waiting = false;
    }
    else {
  //Else execute the passed function with the latest arguments
      func(...waitingArgs);
      waitingArgs = null; //clean the arguments variable as it is used in the previous step
      setTimeout(timeoutFun, wait) //execute the function again with delay provided
    }
  }

  return (...args) => {
    if (waiting) {
      waitingArgs = args //If we are currently waiting then we are storing the latest arguments
      return;
    }


    func(...args);
    waiting = true;

    setTimeout(timeoutFun, wait) //Inspite of calling the function here, I have created another function for ease of implementation

  }
}

This is the advance implementation of throttle function.

Hope you understand the concept of debouncing and if you liked my article then please appreciate it with likes and comments. Thanks in advance.