https://github.com/vpodk/debouncing
🛂 Debouncing and throttling library optimizes event handling by delaying or limiting function execution.
https://github.com/vpodk/debouncing
debounce javascript throttle
Last synced: about 1 year ago
JSON representation
🛂 Debouncing and throttling library optimizes event handling by delaying or limiting function execution.
- Host: GitHub
- URL: https://github.com/vpodk/debouncing
- Owner: vpodk
- License: apache-2.0
- Created: 2021-06-20T18:20:30.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-15T17:50:50.000Z (over 1 year ago)
- Last Synced: 2025-04-12T06:08:15.140Z (about 1 year ago)
- Topics: debounce, javascript, throttle
- Language: JavaScript
- Homepage: https://npmjs.com/debouncing
- Size: 36.1 KB
- Stars: 6
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Debouncing [](https://twitter.com/intent/tweet?text=Debouncing%20and%20throttling%20library%20optimizes%20event%20handling%20by%20delaying%20or%20limiting%20function%20execution.&url=https://npmjs.com/debouncing&via=GitHub&hashtags=JavaScript,ECMAScript,ES6)
[](https://github.com/vpodk/debouncing/actions/workflows/npm-publish.yml) [](https://www.apache.org/licenses/LICENSE-2.0.html) [](https://npmjs.org/package/debouncing) [](https://npmjs.org/package/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
```bash
npm install debouncing --save
```
```js
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);
```