Frontend Weekly
Published in

Frontend Weekly

Photo by Blake Connally on Unsplash

Debouncing and Throttling in Javascript

Debouncing and throttling are both used to enhance the website performance by limiting the number of times the events are triggered. Debouncing and throttling are not provided by JavaScript. They’re just concepts that can be implemented using the setTimeout web API.

What is Debouncing

Let’s take an example. You have opened an e-commerce website to search for laptop bags.

If debounce is not applied you can see in the below image the number of calls is made on every keystroke.

After implementing debounce, we have significantly reduced the number of calls. Now calls are made only when the user types again after the specified time. The function will be executed only when the time taken by the user to type again is equal to the delay that we have provided.

Custom debounce function

What is throttling

Throttling is also used to rate-limit the function call. Throttling will fire the function call only once in 1000ms(the limit which we have provided), no matter how many times the user fires the function call.

Custom Throttling function

Conclusion

I hope after reading this article these two concepts by javascript are cleared.

Throttling and debouncing can be implemented to enhance the searching functionality, infinite scroll, and resizing of the window.

In case I have missed something or you have some advice or suggestions do let me know in the comment section.

You can also reach out to me
https://www.linkedin.com/in/akhatun/

https://github.com/amnahkhatun

Happy coding✌️

--

--

--

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Recommended from Medium

Scope in JavaScript

ES6 2020 New Features

Envus Motors showroom is ready! #Lamborghini #RollsRoyceWraith https://t.co/7Zuep6ZojN

How to use ReactJS with Webpack 4, Babel 7, and Material Design

Migrating from Prismic to Contentful

Photo by Tamas Marton from Pexels

An Introduction to Vue Teleport — A New Feature in Vue3

Build Vue 3 Desktop Apps in Just 5 Minutes

Desktop app

How To Use Autocomplete for jQuery With a Text Array Data Source

jQuery Autocomplete Widget Demo With F1 Drivers

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
Amnah khatun

Amnah khatun

Coder | Blogger | Cosmology enthusiast

More from Medium

Top Javascript and Typescript Short-hand You must know

Memory Management in Javascript

Javascript monkey patching, the art of spying

Javascript String Methods: A Cheat Sheet for Developer