debounce-throttle-utility 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -0
- package/index.js +52 -0
- package/package.json +23 -0
- package/test.spec.js +47 -0
package/README.md
ADDED
@@ -0,0 +1,71 @@
|
|
1
|
+
# Debounce & Throttle Utility [(Git)](https://github.com/paradoxial-composition/debounce-throttle-utility)
|
2
|
+
|
3
|
+
A lightweight utility for debouncing and throttling functions, optimized for performance. Ideal for handling events like scrolling, resizing, or input changes in web apps.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
```bash
|
8
|
+
npm install debounce-throttle-utility
|
9
|
+
```
|
10
|
+
|
11
|
+
## Usage
|
12
|
+
|
13
|
+
### Debounce
|
14
|
+
|
15
|
+
```javascript
|
16
|
+
const { debounce } = require('debounce-throttle-utility');
|
17
|
+
|
18
|
+
const debouncedFunction = debounce(() => {
|
19
|
+
console.log('Debounced!');
|
20
|
+
}, 300);
|
21
|
+
|
22
|
+
debouncedFunction(); // Will execute after 300ms of no calls
|
23
|
+
```
|
24
|
+
|
25
|
+
### Throttle
|
26
|
+
|
27
|
+
```javascript
|
28
|
+
const { throttle } = require('debounce-throttle-utility');
|
29
|
+
|
30
|
+
const throttledFunction = throttle(() => {
|
31
|
+
console.log('Throttled!');
|
32
|
+
}, 500);
|
33
|
+
|
34
|
+
throttledFunction(); // Will execute only once every 500ms
|
35
|
+
```
|
36
|
+
|
37
|
+
## Key Features
|
38
|
+
|
39
|
+
### Simple API for Debounce and Throttle
|
40
|
+
|
41
|
+
- The utility offers straightforward methods for applying debounce and throttle logic to any function.
|
42
|
+
|
43
|
+
- Example:
|
44
|
+
|
45
|
+
```javascript
|
46
|
+
const debouncedFunction = debounce(myFunction, 300);
|
47
|
+
const throttledFunction = throttle(myFunction, 100);
|
48
|
+
```
|
49
|
+
|
50
|
+
### Customizable Delay and Options
|
51
|
+
|
52
|
+
- Developers can specify the delay time (in milliseconds) for both debounce and throttle.
|
53
|
+
- For debounce, additional options include leading and trailing flags to determine whether the function should execute at the start, end, or both ends of the delay period.
|
54
|
+
- Example:
|
55
|
+
|
56
|
+
```javascript
|
57
|
+
const leadingDebounce = debounce(myFunction, 300, { leading: true });
|
58
|
+
const trailingDebounce = debounce(myFunction, 300, { trailing: true });
|
59
|
+
```
|
60
|
+
|
61
|
+
### Zero Dependencies
|
62
|
+
|
63
|
+
The utility is self-contained and does not rely on external libraries, making it lightweight and easy to integrate into any project.
|
64
|
+
|
65
|
+
## Contributing
|
66
|
+
|
67
|
+
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
|
68
|
+
|
69
|
+
## License
|
70
|
+
|
71
|
+
MIT.
|
package/index.js
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
// index.js
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Debounce function
|
5
|
+
* @param {Function} func - The function to debounce
|
6
|
+
* @param {number} wait - Delay in milliseconds
|
7
|
+
* @param {Object} options - Optional configuration
|
8
|
+
* @returns {Function} - Debounced function
|
9
|
+
*/
|
10
|
+
function debounce(func, wait, options = {}) {
|
11
|
+
let timeout;
|
12
|
+
const { leading = false, trailing = true } = options;
|
13
|
+
|
14
|
+
return function(...args) {
|
15
|
+
const context = this;
|
16
|
+
clearTimeout(timeout);
|
17
|
+
|
18
|
+
if (leading && !timeout) {
|
19
|
+
func.apply(context, args);
|
20
|
+
}
|
21
|
+
|
22
|
+
timeout = setTimeout(() => {
|
23
|
+
if (trailing) {
|
24
|
+
func.apply(context, args);
|
25
|
+
}
|
26
|
+
}, wait);
|
27
|
+
};
|
28
|
+
}
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Throttle function
|
32
|
+
* @param {Function} func - The function to throttle
|
33
|
+
* @param {number} limit - Interval in milliseconds
|
34
|
+
* @returns {Function} - Throttled function
|
35
|
+
*/
|
36
|
+
function throttle(func, limit) {
|
37
|
+
let inThrottle;
|
38
|
+
|
39
|
+
return function(...args) {
|
40
|
+
const context = this;
|
41
|
+
if (!inThrottle) {
|
42
|
+
func.apply(context, args);
|
43
|
+
inThrottle = true;
|
44
|
+
setTimeout(() => (inThrottle = false), limit);
|
45
|
+
}
|
46
|
+
};
|
47
|
+
}
|
48
|
+
|
49
|
+
module.exports = {
|
50
|
+
debounce,
|
51
|
+
throttle,
|
52
|
+
};
|
package/package.json
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
{
|
2
|
+
"name": "debounce-throttle-utility",
|
3
|
+
"version": "1.0.0",
|
4
|
+
"description": "A lightweight utility for debouncing and throttling functions, optimized for performance.",
|
5
|
+
"main": "index.js",
|
6
|
+
"scripts": {
|
7
|
+
"test": "jest"
|
8
|
+
},
|
9
|
+
"repository": {
|
10
|
+
"type": "git",
|
11
|
+
"url": "git+https://github.com/paradoxial-composition/debounce-throttle-utility.git"
|
12
|
+
},
|
13
|
+
"keywords": ["debounce", "throttle", "utility", "performance", "scroll", "input", "resize"],
|
14
|
+
"author": "elbani.othman@gmail.com",
|
15
|
+
"license": "MIT",
|
16
|
+
"bugs": {
|
17
|
+
"url": "https://github.com/paradoxial-composition/debounce-throttle-utility/issues"
|
18
|
+
},
|
19
|
+
"homepage": "https://github.com/paradoxial-composition/debounce-throttle-utility#readme",
|
20
|
+
"devDependencies": {
|
21
|
+
"jest": "^29.7.0"
|
22
|
+
}
|
23
|
+
}
|
package/test.spec.js
ADDED
@@ -0,0 +1,47 @@
|
|
1
|
+
// test.js
|
2
|
+
|
3
|
+
const { debounce, throttle } = require('./index');
|
4
|
+
|
5
|
+
describe('Debounce', () => {
|
6
|
+
it('should delay execution', async () => {
|
7
|
+
let count = 0;
|
8
|
+
const debounced = debounce(() => {
|
9
|
+
count++;
|
10
|
+
}, 100);
|
11
|
+
|
12
|
+
debounced();
|
13
|
+
debounced();
|
14
|
+
|
15
|
+
await new Promise((resolve) => setTimeout(resolve, 200));
|
16
|
+
expect(count).toBe(1); // Should execute only once
|
17
|
+
});
|
18
|
+
});
|
19
|
+
|
20
|
+
describe('Throttle', () => {
|
21
|
+
it('should limit execution', async () => {
|
22
|
+
let count = 0;
|
23
|
+
const throttled = throttle(() => {
|
24
|
+
count++;
|
25
|
+
}, 100);
|
26
|
+
|
27
|
+
throttled();
|
28
|
+
throttled();
|
29
|
+
|
30
|
+
await new Promise((resolve) => setTimeout(resolve, 200));
|
31
|
+
expect(count).toBe(1); // Should execute only once within 100ms
|
32
|
+
});
|
33
|
+
|
34
|
+
it('should be executed only twice in a 500ms interval ', async () => {
|
35
|
+
let count = 0;
|
36
|
+
const throttled = throttle(() => {
|
37
|
+
count++;
|
38
|
+
}, 100);
|
39
|
+
|
40
|
+
throttled();
|
41
|
+
throttled();
|
42
|
+
await new Promise((resolve) => setTimeout(resolve, 200));
|
43
|
+
throttled();
|
44
|
+
|
45
|
+
expect(count).toBe(2);
|
46
|
+
});
|
47
|
+
});
|