Master JavaScript Function Throttling: Boost Performance & Prevent Overloads
This article explains what JavaScript function throttling is, why it improves performance for high‑frequency events like scroll or resize, and provides step‑by‑step code examples—including basic and advanced implementations—to control execution timing and avoid excessive DOM or network calls.
What is JavaScript function throttling? It is a technique that limits how often a high‑frequency function can be executed by using a timer, thereby improving browser performance and preventing repeated AJAX calls.
Typical use cases include onresize, scroll, mousemove, and mousehover callbacks. The basic idea is to create a setTimeout timer on the first call, clear the previous timer on subsequent calls, and only execute the function after the delay, ensuring that only the last invocation runs within a given interval.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function Throttling</title>
<style>
body{height:2000px;}
</style>
</head>
<body>
<script>
window.onscroll = function (argument) {
console.log("函数调用");
};
</script>
</body>
</html>Without throttling, scrolling triggers many function calls, which can become a nightmare if each call manipulates the DOM or makes network requests.
Below is a simple throttling implementation:
window.onscroll = function(){
console.log("scroll滑动");
throttle(count);
};
function count(){
console.log("函数调用");
}
function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 300);
}With this code, the count function runs only after scrolling stops and the timer expires.
If you need the logic to run at regular intervals while scrolling (instead of waiting for the scroll to stop), you can use a more advanced throttling function that accepts a delay and a mandatory execution interval:
var time = +new Date();
function count(){
console.log("函数调用:" + (+new Date() - time));
}
/**
* @param {Function} fn - function to throttle
* @param {Number} delay - delay between calls
* @param {Number} mustRun - minimum interval to force execution
* @return {Function}
*/
var throttle = function(fn, delay, mustRun){
var timer = null,
previous = null;
return function(){
var now = +new Date(),
context = this,
args = arguments;
if (!previous) previous = now;
var remaining = now - previous;
if (mustRun && remaining >= mustRun){
fn.apply(context, args);
previous = now;
} else {
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};
window.onscroll = throttle(count, 500, 1000);Using this approach, the function is guaranteed to run at least once every mustRun milliseconds while still limiting the frequency of calls, making it suitable for scenarios that require frequent execution with a bounded rate.
In summary, clever use of function throttling can significantly improve page performance and user interaction experience.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.