debouncing
v22.7.25
Published
Debouncing and throttling library optimizes event handling by delaying or limiting function execution.
Downloads
48,294
Readme
Debouncing
Debouncing and throttling library optimizes event handling by intelligently delaying or limiting function execution. This prevents overwhelming user interfaces and unnecessary server requests, especially for fast-paced events like scrolling, typing, or button clicks. Choose between debouncing for single, final execution after a pause, or throttling for consistent function calls within a set interval. Leverage this library to enhance performance and responsiveness in your web applications.
Usage
npm install debouncing --save
import { debounce, throttle } from "debouncing";
const onResize = (event) => {
console.log("height", window.innerHeight);
console.log("width", window.innerWidth);
};
/**
* In the debouncing technique, no matter how many times the user fires the
* event, the attached function will be executed only after the specified
* time once the user stops firing the event.
*
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
* N milliseconds.
* @param {!Function} func The function to execute.
* @param {number=} timeout The timeout in milliseconds.
* @return {!Function} Returns a function, that, as long as it continues
* to be invoked, will not be triggered.
*/
window.addEventListener("resize", debounce(onResize, 250), false);
/**
* Throttling is a technique in which, no matter how many times the user
* fires the event, the attached function will be executed only once in a
* given time interval.
*
* Returns a function, that, as long as it continues to be invoked, will only
* trigger every N milliseconds.
* @param {!Function} func The function to execute.
* @param {number=} timeout The timeout in milliseconds.
* @return {!Function} Returns a function, that, as long as it continues
* to be invoked, will only trigger every N milliseconds.
*/
window.addEventListener("resize", throttle(onResize, 250), false);