Syntax, Parameter and Return Value
Syntax:
_.throttle(func, [wait=0], [options={}])
Parameters:
-
func (Function): The function to throttle.
-
[wait=0] (number): The number of milliseconds to throttle invocations.
-
[options={}] (Object): The options object.
-
leading (boolean): Specify invoking on the leading edge of the timeout.
- trailing (boolean): Specify invoking on the trailing edge of the timeout.
Return Value:
(Function) - Returns the new throttled function.
Examples
Throttling Scroll Event Handler:
var _ = require('lodash');
function onScroll() {
console.log('Scrolled!');
}
var throttledScroll = _.throttle(onScroll, 200);
window.addEventListener('scroll', throttledScroll);
You can also try this code with Online Javascript Compiler
// 'onScroll' will be called at most every 200ms during scrolling.
Demonstrates using _.throttle() to optimize a scroll event handler.
Throttling a Resize Event Handler:
function onResize() {
console.log('Window resized');
}
var throttledResize = _.throttle(onResize, 250);
window.addEventListener('resize', throttledResize);
You can also try this code with Online Javascript Compiler
// 'onResize' will be called at most every 250ms during window resizing.
Shows throttling a resize event handler to improve performance.
Throttling Button Clicks:
function handleClick() {
console.log('Button clicked');
}
var throttledClick = _.throttle(handleClick, 1000);
document.getElementById('myButton').addEventListener('click', throttledClick);
You can also try this code with Online Javascript Compiler
// Prevents multiple rapid clicks from triggering the handler more than once every second.
An example of using _.throttle() to prevent rapid repeated clicks.
Rate-Limiting API Calls:
function fetchData() {
console.log('Fetching data');
// API call logic
}
var throttledFetch = _.throttle(fetchData, 5000);
// Usage in a context where frequent triggers are possible
throttledFetch(); // 'fetchData' is called, subsequent calls within 5 seconds are ignored.
You can also try this code with Online Javascript Compiler
Demonstrates throttling API call function to prevent excessive requests.
Frequently Asked Questions
What is the difference between throttling and debouncing?
Throttling limits the function execution to once every specified time interval, whereas debouncing delays the function execution until a certain period of inactivity.
Can the throttle interval be changed after creation?
Once a throttled function is created, the interval is fixed. To change the interval, you would need to create a new throttled function.
Does _.throttle() affect the original function?
No, _.throttle() does not modify the original function. It creates a new function that limits the rate of the original function's execution.
Conclusion
Lodash's _.throttle() method is a valuable tool for controlling the execution rate of functions, especially in response to high-frequency events. It helps optimize performance and resource usage by preventing excessive or unnecessary executions of functions.
You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc.
Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.
19+ registered 
