Lately I’ve been asked a lot about how I would implement a debounce function as an exercise, and I wondered why this question has become prevalent in the front-end engineering world.

The more I was asked this question, the more I thought about why it was asked, and the reasoning I came up with makes sense:

It tests your deeper knowledge of JavaScript

There is a practical, real-world application

These are commonly used in modern front-end development

When looking around, there wasn’t a wealth of information on the inner workings of a debounce function and that was surprising — I know that Underscore has implementations for both debounce and throttle, but I do believe that it’s important to understand on a deeper level what they are doing before using them extensively. This blog’s purpose is to explain the nuances of JavaScript inside this (albeit, simple) implementation. There are a lot of opinions on the “correct” way to implement these functions, and this blog post is not about that. So without further ado, let’s dive right in.