Throttling VS Debouncing in Javascript
source link: http://www.js-craft.io/blog/throttling-vs-debouncing-in-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Throttling VS Debouncing in Javascript
Some time ago I've written a short article about debouncing in Javascript.
Another term very related to debouncing is throttling. Both techniques do the same thing: they make sure expensive operations (like API calls) are limited in a time interval.
But, in different ways:
- throttling makes sure that one function is not called more than once in X milliseconds
- with debouncing we make sure a function is called just once, even if it was invoked multiple times.
A simple implementation for a throttling function may look like this:
function throttle(f, t) {
return function (args) {
let previousCall = this.lastCall;
this.lastCall = Date.now();
if (previousCall === undefined || (this.lastCall - previousCall) > t) {
f(args);
}
}
}You can see in the other tutorial the implementation for the debouncing function.
For example, if we have a user is pressing a button every 500 milliseconds for 6 seconds:
- with a throttling interval of 2 seconds, the call for the button will take place 3 times.
- with a debouncing time of 500 milliseconds, then after 6 seconds, the call for the button only takes place just once
Also if you want to read more I have found useful the following links:
I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.
Newsletter subscribe:
Posts navigation
About your host
Hey there, thanks for dropping by! I’m Daniel, a software engineer with a big passion for Javascript and CSS. I stronlgy believe that education is the key to building a better, stable and richer world.
Twitter |
RSS |
Newsletter
Recommend
-
44
W hen building an app using React, we always have this problem of limiting the number of expensive calls, async network requests and DOM updates. We can really check all these using the features provided...
-
27
Introduction A common conundrum in today’s front-end framework world is knowing when and how to take certain asynchronous actions, such as persisting data to a backend. If we’re using a state management library l...
-
7
-
7
Debouncing with React HooksNick Scialli • April 09, 2019 • 🚀🚀 6 minute readIn this post, I am going to use the React Hooks API to implement debouncing. If you are unfamiliar with debounci...
-
5
Improve Your App Performance with Event Debouncing May 21 2018 | By Taha Shashtari If you have a text input that fires an AJAX request each time the user types something into it, it would be inefficient not...
-
7
Tutorial Throttling and Debouncing Events with Vue.js and lodash Vue.js ...
-
3
What is debouncing in JavaScript? While building an app using...
-
9
In many cases, you want to limit how often a function is called. Implementing such limits can lead to complex code, unless a functional technique is used. In this article, we’ll show how we can debounce and throttle functions (don’t worry! we’ll e...
-
2
@maratMaratHi guys, I'm Marat, a software developer with expertise i...
-
5
May 28, 2023 3 min read
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK