debounce
Advanced tools
Package description
The debounce npm package provides a function that delays the execution of a function until after a specified wait time has elapsed since the last time it was invoked. This is particularly useful for rate-limiting the execution of functions that may be called frequently, such as during window resizing, scrolling, or keyboard input, to improve performance and reduce the number of unnecessary function calls.
Debouncing function calls
This code sample demonstrates how to use the debounce package to debounce a function that logs 'Input saved!' to the console. The function will only be called after 250 milliseconds have passed without the 'input' event being triggered.
const debounce = require('debounce');
const saveInput = debounce(() => console.log('Input saved!'), 250);
window.addEventListener('input', saveInput);Immediate invocation option
This code sample shows how to use the debounce package with the immediate flag set to true. This causes the function to be executed immediately on the first call, then debounced for subsequent calls within the 250-millisecond timeframe.
const debounce = require('debounce');
const processChange = debounce(() => console.log('Change processed!'), 250, true);
window.addEventListener('change', processChange);Canceling a debounced call
This code sample illustrates how to cancel a debounced function call. The 'cancel' method is used to prevent the debounced function from being called if it has not yet been executed.
const debounce = require('debounce');
const expensiveOperation = debounce(() => console.log('Operation executed!'), 1000);
expensiveOperation();
expensiveOperation.cancel();lodash.debounce is a function from the popular Lodash library that provides debouncing capabilities. It is similar to debounce but comes with additional options for leading and trailing invocation, and maxWait time. Lodash's debounce is often preferred for its extended functionality and reliability within the Lodash ecosystem.
throttle-debounce is a package that offers both throttle and debounce functions. While debounce delays function execution, throttle ensures that a function is only called at most once in a specified period. This package is useful for those who need both functionalities and prefer a combined solution.
p-debounce is a package that provides debouncing functionality for promises. It is similar to debounce but is specifically designed to work with functions that return promises, ensuring that a promise-returning function is not invoked too frequently.
Readme
Useful for implementing behavior that should only happen after a repeated action has completed.
$ component install component/debounce
Or in node:
$ npm install debounce
var debounce = require('debounce');
window.onresize = debounce(resize, 200);
function resize(e) {
console.log('height', window.innerHeight);
console.log('width', window.innerWidth);
}
To later clear the timer and cancel currently scheduled executions:
window.onresize.clear();
To execute any pending invocations and reset the timer:
window.onresize.flush();
Alternately, if using newer syntax:
import { debounce } from "debounce";
Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked.
Pass true for the immediate parameter to cause debounce to trigger
the function on the leading edge instead of the trailing edge of the wait
interval. Useful in circumstances like preventing accidental double-clicks
on a "submit" button from firing a second time.
The debounced function returned has a property 'clear' that is a function that will clear any scheduled future executions of your function.
The debounced function returned has a property 'flush' that is a function that will immediately execute the function if and only if execution is scheduled, and reset the execution timer for subsequent invocations of the debounced function.
MIT
Original implementation is from underscore.js
which also has an MIT license.
FAQs
Delay function calls until a set time elapses after the last invocation
We found that debounce demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 28 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.