Throttling in JavaScript

Suppose that you're on an ecommerce site. You add a bunch of items to your cart. Now it's time to pay.

You hit the checkout button, but it's taking way too long. So like any reasonable person, you click it over and over and over again.

From a UI developer's point of view, this is a nightmare. Each click of the button fires off a request and if you don't have the proper guardrails, you could be making more requests that you need.

This is where throttling can come in. The idea of throttling is making sure that there's a cooldown period between each request. In the case of our impatient shopper, we can use throttling to make sure that each click of the checkout button won't result in more server calls!

Let's try to implement this in JavaScript.

function throttle(func, cooldown) {
  let isThrottled = false
  let result

  return function (...args) {
    if (isThrottled) {
      return result
    }

    result = func.apply(this, args)
    isThrottled = true

    setTimeout(() => {
      isThrottled = false
    }, cooldown)

    return result
  }
}

So how is this code throttling anything? This function wraps another function that fires the request to be sent to the server. We keep track of isThrottled which guards whether we call the callback function.

We use a setTimeout here in order to flip isThrottled back to false and allow requests to be sent again after some cooldown period.

Although it's a naive implementation, it should illustrate how we can throttle any event handlers in the UI!