DEV Community: Eihab Khan

JavaScript Throttling from Scratch

Eihab Khan — Sun, 02 Mar 2025 12:10:43 +0000

What is Throttling?

Throttling is a technique for limiting the number of times a function can be called within a specified time. Unlike debouncing, throttled functions execute immediately when first called and ignore subsequent calls until a cooldown period has passed.

How to Use Throttle

The throttle function creates a new function that wraps your original function with throttling behavior:

let counter = 0

const increment = () => {
  counter += 1;
  console.log(counter);
}

const throttledIncrement = throttle(increment, 500);

// First call executes immediately
throttledIncrement(); // logs 1

// These calls are ignored during the 500ms cooldown
throttledIncrement(); 
throttledIncrement();
throttledIncrement();

// After 500ms passes, the function can be called again
setTimeout(() => {
  throttledIncrement(); // logs 2
}, 600);

Real-World Applications

Throttling is particularly useful when dealing with events that fire rapidly. Think about scroll events on a webpage - without throttling, a scroll handler might fire hundreds of times during a single scroll action. With throttling, you can limit it to executing maybe once every 100ms, which is more efficient.

Building Our Own Throttle Function

Alright, let's build our throttle function step by step. First, we'll start with the basic function signature:

function throttle(func: Function, wait: number): Function {
}

We know throttle returns a new function, so let's add that:

function throttle(func: Function, wait: number): Function {
  return function() {
  }
}

Now, we need to track whether the function is in its cooldown period. For this, we'll use a variable in the closure:

function throttle(func: Function, wait: number): Function {
  let timer: number | null;

  return function() {
  }
}

The throttling logic is straightforward:

If the timer exists (we're in cooldown), ignore the call
Otherwise, execute the function and start the cooldown timer

function throttle(func: Function, wait: number): Function {
  let timer: number | null;

  return function() {
    if (timer) return;

    func();
    timer = setTimeout(() => { timer = null }, wait);
  }
}

This basic version works, but we're missing a couple of important things. We need to handle the this context and any arguments passed to the throttled function:

function throttle(func: Function, wait: number): Function {
  let timer: number | null;

  return function(this: any, ...args: any[]) {
    if (timer) return;

    func.apply(this, args);
    timer = setTimeout(() => { timer = null }, wait);
  }
}

And that's our complete throttle function! Notice we're using a regular function instead of an arrow function for the returned function. This is important because we want this to refer to where the function is called, not where it's defined.

Also, we're using func.apply(this, args) to ensure the original function gets both the correct context and all the arguments passed to the throttled function.

The final piece is the setTimeout callback that resets our timer to null after the wait period, which allows the function to be called again.

That's it! We've built a throttle function from scratch!

Throttle vs. Debounce: When to Use Each

The key difference is in timing:

Throttling executes immediately and then waits
Debouncing waits first and then executes

Use throttling when you need immediate response but want to limit subsequent calls. Use debouncing when you want to wait until activity has completely stopped.

If you've read my previous article on debouncing, you'll notice the approaches are similar but solve different problems. Both techniques use closures and timeouts, but they implement different timing strategies to control function execution.

A Personal Note

Similar to my debounce article, I wrote this throttle explanation to solidify my understanding of the concept. Working on these fundamental JavaScript utilities has helped me appreciate how elegant solutions can be built with just a few lines of code.

By exploring both throttling and debouncing, I've gained a better understanding of when to use each technique in real-world applications. I hope these articles help others who are learning these concepts too!

JavaScript Debouncing from Scratch

Eihab Khan — Sun, 23 Feb 2025 21:19:06 +0000

What is Debouncing?

Debounce is a technique used to postpone the invocation of a function till a specified amount of time has passed. A key characteristic of “debounced” functions is that even if it gets called multiple times, no call overlaps another.

How to Use Debounce

the debounce function is used to create a new function

let counter = 0

const increment = () => {
    counter += 1;
}

const debouncedIncrement = debounce(increment, 500);

debouncedIncrement() // increases counter by 1 after 500ms have passed.

// In case of multiple calls:
debouncedIncrement(); // called immediately
debouncedIncrement(); // called 100ms later
debouncedIncrement(); // called 200ms later
// Only the last call executes, 500ms after the final call

Real-World Applications

To better understand why we need debouncing, let’s take a look at a real-world example where debouncing is used, now this is not the only usage of debounce, but to make this explanation simple, we will talk about one example: Search boxes.

There’s a high chance you’ve already encountered some form of debouncing, especially on websites where users are likely to use a search box; You go to the website, click on the search box, and start typing, and a suggestion/result box appears after some fraction of a second. That right there is debouncing in action.

Building Our Own Debounce Function

TIDBIT: Earlier we mentioned that the debounce function returns a function that you can call that will in turn call your callback function after a time has passed. A hint to look for is that whenever you see a function that returns another function, you’re almost guaranteed that there is some form of closure going on under the hood. Spoiler alert: a closure happens in the debounce function that allows for its “debouncing” feature.

Alright, enough talk, let's have at it, let’s start by writing the function signature

function debounce(callback: Function, wait: number): Function {
}

we know that it will return a function, so let’s return an empty function for now

function debounce(callback: Function, wait: number): Function {
    return function() {
    }
}

now let’s think about what the debounce function does; wait for some time and then call the callback function, if you’ve been writing JavaScript for a while you know that there is a function that offers this functionality for us, the setTimeout() function:

function debounce(callback: Function, wait: number): Function {
    return function() {
        setTimeout(() => callback(), wait);
    }
}

Cool, this code seems to work right, but we’re not there yet as we still haven’t achieved the key characteristic of debouncing: Canceling previous debounced calls.

The way to do that is straightforward, setTimeout returns an id that we can use to clear the timeout using clearTimeout .

function debounce(callback: Function, wait: number): Function {
    return function() {
        const timer = setTimeout(() => callback(), wait);
    }
}

With the way this code is written, if we call the debounced function multiple times, it will never cancel the previous call, that’s because in each call we don’t know if the function has been called before or not. This is a use case for why closures are useful in JavaScript. Let’s modify the code a bit

function debounce(callback: Function, wait: number): Function {
  let timer: number;

  return function() {
        clearTimeout(timer);
        timer = setTimeout(() => callback(), wait);
    }
}

This simple change makes a huge impact. Now, if we call the debounced function multiple times, the function knows if it was called before when the timer variable was populated. If it was we simply clear the previous timeout and we create a new one.

Sometimes the debounced function is expected to receive some parameters. There are also times when there is a reference to this inside the callback. Our function doesn’t support either of these so let’s do that:

function debounce(callback: Function, wait: number): Function {
  let timer: number;

  return function (this: any, ...args: any[]) {
    clearTimeout(timer);
    timer = setTimeout(() => callback.apply(this, args), wait);
  };
}

We’ve done a couple of things here. First, we added this to the list of params so we can bind it with the callback function. Second, we captured any params the user might pass to the debounced function and passed them to the callback function.

That’s pretty much it for the debounce function. I want to point out one last thing which is important to know; Notice in the return statement we returned a normal function instead of an arrow function, that’s deliberate.

You see, one distinct difference between normal and arrow functions is the following:

this in arrow functions references the context where the function was defined.
this in normal functions references the context where the function was called.

That’s pretty much it. Congratulations! You just built your own debounce function 🎉

A Personal Note

I originally wrote these notes to solidify my own understanding of debouncing. While writing them, I found that explaining concepts to myself helped cement my learning. I'm sharing them publicly in case they might help others on their coding journey - and maybe because explaining things is just fun.

If you found this helpful or spotted something that could be improved, feel free to leave a comment!

DEV Community: Eihab Khan

JavaScript Throttling from Scratch

What is Throttling?

How to Use Throttle

Real-World Applications

Building Our Own Throttle Function

Throttle vs. Debounce: When to Use Each

Further Reading & Resources

A Personal Note

JavaScript Debouncing from Scratch

What is Debouncing?

How to Use Debounce

Real-World Applications

Building Our Own Debounce Function

Further Reading & Resources

A Personal Note