Member-only story
Debounce With Vanilla JavaScript or RxJS
Debouncing demystified
I recently had to clean the code we’re using in DeckDeckGo. Notably, I had to refactor singleton methods to stateless functions. One of these gave me a harder time, which is what gave me the idea of writing this piece!
What is Debouncing?
Let’s say you’ve implemented an <input/> in your application, which triggers an update to your database every time its content changes. For performance reasons, and maybe even for cost reasons (if, for example, you’re using Google Firestore) you may not want to trigger a database update every single time a keyboard key is hit, but rather perform a save only when needed. For example, you might want to only perform the save when the user would mark a pause, or when she/he has finished her/his interaction with the component.
Likewise, you might have a function in your application, which could be called multiple times in a row, for which you’d prefer to only consider the last call.
That is what debouncing is to me — making sure that a method is not called too often.
Debounce Time
Commonly, in order to detect which functions should effectively be triggered, a delay between calls is observed. For example, if we’re debouncing a function…
