Debouncing and Throttling in JavaScript

Debounce

Throttle

When to use each

  • Measure the scroll position of the page — The browser will fire the scroll binding event every single time the user scrolls, which can result in many events per scroll. If the binding event performs several repaints, this spells bad news for the end-user; layout reflows and repaints are expensive, especially when you are redrawing large parts of the view, as is the case when there is a scroll event.
  • Wait until the user stops resizing the window — Window resizes operations cause various child elements to update themselves by resizing and reorganizing themselves. By throttling, you can delay the resize events and fire fewer of those resizing events.
  • Fire Ajax calls under control and avoids unnecessary network request handling — for example, in case of searching for external data, wait until the end-user stops typing by using debounce. If you are sending log data frequently, use a throttle.

--

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Scripts need love too!

How to Implement “Please, Wait!” Animation Using Ajax in Django

How To Build A Dark Mode Switcher with CSS Variables

Episode 2 — Mr Frontend Motivation Talk — JavaScript frameworks are not your highest goal to learn!

Day 11: DOM manipulation

Javascript module imports in large projects

JavaScript: The Spread Operator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.

More from Medium

JS-09 — JavaScript for Programmers, Chapter7

Generate a Random Number in Javascript

Creating a Javascript Promise

Special Concepts about JavaScript & MongoDB