This content originally appeared on DEV Community and was authored by Hemendra Khatik
Again a jargonish word, but let me demystify it for you.
It's nothing but a simple technique we use to prevent unnecessary function calls to improve app's performance.
Unlike Debouncing, here we block a function call for a particular time, if it's been executed recently. Or we could also say that throttling ensures a function call regularly at a fixed rate.
Let's look at below example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Throttling</title>
</head>
<body>
<button class="btn">Click here</button>
<script src="index.js"></script>
</body>
</html>
let count = 0;
function submitData(query){
// some api call
console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",()=>{
submitData();
})
In the above example, if you click 10 times in 2000ms, Function will be called 10 times, as you can clearly see in the above example.
It's a very expensive operation, and as dev our job is to make operations as cheap as possible.
Let's see how throttling help us to make these operation cheaper.
function throttle(fn,delay){
let last = 0;
/*
here ...args is optional I've used this in case, if you
want to pass some parameters you can use ...args
*/
return (...args)=>{
const now = new Date().getTime();
if(now - last < delay){
return;
}
last = now;
return fn(...args)
}
}
const magicFunction = throttle(submitData,1000);
let count = 0;
function submitData(){
// some api call
console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",magicFunction);
Now, if you click 10 times in 2000ms, Function will be called 2 times only, as you can see in the code. We have blocked the function call for 1000ms.
That's how we can implement the throttling technique to improve our app's performance
follow me for more such blog posts.
Let me know if this blog was helpful.
This content originally appeared on DEV Community and was authored by Hemendra Khatik
Hemendra Khatik | Sciencx (2022-06-30T07:27:48+00:00) What is throttling in JavaScript?. Retrieved from https://www.scien.cx/2022/06/30/what-is-throttling-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.