Syntax, Parameter and Return Value
Syntax:
_.debounce(func, [wait=0], [options={}])
Parameters:
-
func (Function): The function to debounce.
-
[wait=0] (number): The number of milliseconds to delay.
-
[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 debounced function.
Examples
Debouncing a Resize Event Handler:
JavaScript
var _ = require('lodash');
function resizeHandler() {
console.log('Window resized');
}
var debouncedResize = _.debounce(resizeHandler, 200);
window.addEventListener('resize', debouncedResize);
You can also try this code with Online Javascript Compiler
// Function 'resizeHandler' will be called after 200ms of the last resize event.
Demonstrates debouncing a window resize event handler.
Search Input Debouncing:
JavaScript
function searchDatabase(query) {
console.log('Searching for:', query);
}
var debouncedSearch = _.debounce(searchDatabase, 300);
// Assuming an input field for search
document.getElementById('searchInput').addEventListener('input', event => {
debouncedSearch(event.target.value);
});
You can also try this code with Online Javascript Compiler
// Search function will be called 300ms after the user stops typing.
Shows debouncing a search function to reduce the frequency of search operations.
Debouncing with Leading and Trailing Calls:
JavaScript
var saveInput = _.debounce(function(text) {
console.log('Saving data:', text);
}, 1000, { 'leading': true, 'trailing': false });
saveInput('First');
saveInput('Second');
You can also try this code with Online Javascript Compiler
Output immediately:
'Saving data: First'
// Subsequent calls within 1000ms are ignored.
An example of debouncing a function to trigger on the leading edge.
Throttling Scroll Events:
JavaScript
function onScroll() {
console.log('Scrolled!');
}
var debouncedOnScroll = _.debounce(onScroll, 150);
window.addEventListener('scroll', debouncedOnScroll);
You can also try this code with Online Javascript Compiler
// Function 'onScroll' will be called 150ms after the last scroll event.
Demonstrates using debounce to efficiently handle scroll events.
Frequently Asked Questions
What is the difference between debouncing and throttling?
Debouncing delays a function call until a certain amount of time has passed without it being called again, while throttling limits the function calls to a certain rate.
Can the debounce delay be updated after creation?
Once a debounced function is created, its delay time is fixed. To change the delay, you need to create a new debounced function with the desired delay.
Is _.debounce() suitable for handling all types of events?
_.debounce() is ideal for events that fire frequently and do not require immediate action for every occurrence, like resize, scroll, or input events.
Conclusion
Lodash's _.debounce() method is an essential tool in event-driven programming, especially for optimizing performance and user experience in scenarios involving frequent event triggering. It allows for effective rate control of function execution, ensuring responsiveness without compromising on functionality.
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.
248+ registered 
