What is debounce-fn?
The debounce-fn npm package provides a simple and efficient way to debounce functions in JavaScript. Debouncing is a technique used to limit the rate at which a function is executed. This is particularly useful for performance optimization in scenarios where a function is called repeatedly in quick succession, such as during window resizing, scrolling, or keypress events.
What are debounce-fn's main functionalities?
Basic Debouncing
This feature allows you to debounce a function with a specified wait time. In this example, the `expensiveFunction` will only be called once every 200 milliseconds, even though `debouncedFunction` is called every 50 milliseconds.
const debounceFn = require('debounce-fn');
const expensiveFunction = () => {
console.log('Expensive function called');
};
const debouncedFunction = debounceFn(expensiveFunction, { wait: 200 });
// Call the debounced function multiple times
setInterval(debouncedFunction, 50);
Immediate Execution
This feature allows the debounced function to be executed immediately on the first call, and then debounced for subsequent calls. In this example, `logMessage` is executed immediately on the first call, and then debounced for 200 milliseconds.
const debounceFn = require('debounce-fn');
const logMessage = () => {
console.log('Function executed immediately');
};
const debouncedLogMessage = debounceFn(logMessage, { wait: 200, immediate: true });
debouncedLogMessage(); // Executes immediately
setTimeout(debouncedLogMessage, 100); // Will not execute
setTimeout(debouncedLogMessage, 300); // Executes after 300ms
Cancel Debounced Function
This feature allows you to cancel a debounced function before it gets executed. In this example, `fetchData` is debounced with a wait time of 300 milliseconds, but the second call to `debouncedFetchData.cancel()` cancels the execution.
const debounceFn = require('debounce-fn');
const fetchData = () => {
console.log('Fetching data');
};
const debouncedFetchData = debounceFn(fetchData, { wait: 300 });
debouncedFetchData();
debouncedFetchData.cancel(); // Cancels the debounced function
Other packages similar to debounce-fn
lodash.debounce
The lodash.debounce package is a popular utility for debouncing functions. It is part of the Lodash library, which provides a wide range of utility functions for JavaScript. Compared to debounce-fn, lodash.debounce offers more configuration options and is widely used in the JavaScript community.
debounce
The debounce package is a lightweight utility for debouncing functions. It provides a simple API similar to debounce-fn but with fewer configuration options. It is suitable for users who need a minimalistic solution for debouncing functions.
throttle-debounce
The throttle-debounce package provides both throttling and debouncing utilities. It is useful for scenarios where you need both functionalities. Compared to debounce-fn, throttle-debounce offers a more comprehensive solution for rate-limiting function executions.
debounce-fn
Debounce a function
Install
npm install debounce-fn
Usage
import debounceFunction from 'debounce-fn';
window.onresize = debounceFunction(() => {
}, {wait: 100});
API
debounceFunction(input, options?)
Returns a debounced function that delays calling the input
function until after wait
milliseconds have elapsed since the last time the debounced function was called.
It comes with a .cancel()
method to cancel any scheduled input
function calls.
input
Type: Function
Function to debounce.
options
Type: object
wait
Type: number
Default: 0
Time in milliseconds to wait until the input
function is called.
maxWait
Type: number
Default: Infinity
The maximum time the input
function is allowed to be delayed before it's invoked.
This can be used to limit the number of calls handled in a constant stream. For example, a media player sending updates every few milliseconds but wants to be handled only once a second.
before
Type: boolean
Default: false
Trigger the function on the leading edge of the wait
interval.
For example, can be useful for preventing accidental double-clicks on a "submit" button from firing a second time.
after
Type: boolean
Default: true
Trigger the function on the trailing edge of the wait
interval.
Related
- p-debounce - Debounce promise-returning & async functions