@avatijs/debounce 0.1.1 โ†’ 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -1,242 +1,158 @@
1
- # Advanced TypeScript Debounce Utility
2
-
3
- A highly configurable debounce utility with TypeScript support, providing features like leading/trailing edge execution, cancellation, immediate flush, maximum wait time, and proper Promise handling.
4
-
5
- ## Features
6
-
7
- - ๐ŸŽฏ Configurable leading/trailing edge execution
8
- - ๐Ÿšซ Cancelable debounced functions
9
- - โšก Immediate flush capability
10
- - โฑ๏ธ Maximum wait time option
11
- - ๐Ÿ”„ Promise-based return values
12
- - ๐ŸŽญ AbortController support
13
- - ๐Ÿž Debug mode
14
- - ๐Ÿ“ Comprehensive TypeScript types
15
- - ๐Ÿงน Proper cleanup utilities
16
-
17
- ## Installation
1
+ # TypeScript Debounce
2
+
3
+ [![npm version](https://badge.fury.io/js/@avatijs%2Fdebounce.svg)](https://badge.fury.io/js/@avatijs%2Fdebounce)
4
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
5
+ [![License](https://img.shields.io/npm/l/@avatijs%2Fdebounce.svg)](https://github.com/KhaledSMQ/avati/blob/master/LICENSE)
6
+
7
+ ## Introduction
8
+
9
+ TypeScript Debounce is an elegant, robust debounce utility that brings the power of controlled function execution to your TypeScript applications. It provides a clean, type-safe API for managing function call rates, preventing resource overuse, and improving application performance.
10
+
11
+ ### ๐ŸŒŸ Why Another Debounce Library?
12
+
13
+ While there are many debounce implementations available, this library stands out by offering:
14
+
15
+ - **Full TypeScript Support**: Built from the ground up with TypeScript, providing complete type safety and excellent IDE integration
16
+ - **Promise-Based API**: Modern async/await support with proper error handling
17
+ - **Configurable Execution**: Control both leading and trailing edge execution
18
+ - **Resource Management**: Built-in cleanup and cancellation support
19
+ - **Debug Support**: Comprehensive logging for development troubleshooting
20
+ - **Maximum Wait Time**: Guarantee execution for long-running debounce periods
21
+ - **Zero Dependencies**: Lightweight and self-contained
22
+
23
+ ## ๐ŸŽฏ When You Need This
24
+
25
+ Debouncing is crucial in many common development scenarios:
26
+
27
+ 1. **Search Input Handling**
28
+ ```typescript
29
+ // Without debounce - Makes API call on every keystroke
30
+ searchInput.addEventListener('input', async (e) => {
31
+ const results = await searchAPI(e.target.value); // ๐Ÿ”ด Excessive API calls
32
+ });
33
+
34
+ // With debounce - Waits for user to stop typing
35
+ const debouncedSearch = debounce(async (value: string) => {
36
+ const results = await searchAPI(value);
37
+ }, { wait: 300 }); // โœ… Single API call after typing stops
38
+ ```
39
+
40
+ 2. **Window Resize Handling**
41
+ ```typescript
42
+ // Without debounce - Recalculates layout on every resize event
43
+ window.addEventListener('resize', () => {
44
+ recalculateLayout(); // ๐Ÿ”ด Performance bottleneck
45
+ });
46
+
47
+ // With debounce - Controlled recalculation
48
+ const debouncedResize = debounce(() => {
49
+ recalculateLayout();
50
+ }, { wait: 150 }); // โœ… Smooth performance
51
+ ```
52
+
53
+ 3. **Form Validation**
54
+ ```typescript
55
+ // Without debounce - Validates on every change
56
+ input.addEventListener('input', async (e) => {
57
+ await validateField(e.target.value); // ๐Ÿ”ด Excessive validation
58
+ });
59
+
60
+ // With debounce - Validates after user stops typing
61
+ const debouncedValidate = debounce(async (value: string) => {
62
+ await validateField(value);
63
+ }, { wait: 400 }); // โœ… Efficient validation
64
+ ```
65
+
66
+ 4. **Real-time Saving**
67
+ ```typescript
68
+ // Without debounce - Saves on every change
69
+ editor.on('change', async (content) => {
70
+ await saveContent(content); // ๐Ÿ”ด Too many save operations
71
+ });
72
+
73
+ // With debounce - Intelligently batches saves
74
+ const debouncedSave = debounce(async (content: string) => {
75
+ await saveContent(content);
76
+ }, { wait: 1000 }); // โœ… Optimized saving
77
+ ```
78
+
79
+ ## ๐Ÿš€ Installation
18
80
 
19
81
  ```bash
20
- npm install @avatijs/debounce
82
+ npm install typescript-debounce
83
+ # or
84
+ yarn add typescript-debounce
85
+ # or
86
+ pnpm add typescript-debounce
21
87
  ```
22
88
 
23
- ## Basic Usage
89
+ ## ๐Ÿ“˜ Quick Start
24
90
 
25
91
  ```typescript
26
- import { debounce } from '@your-org/debounce-utility';
27
-
28
- // Simple debounce
29
- const debouncedFn = debounce(async (x: number) => x * 2, {
30
- wait: 1000
31
- });
32
-
33
- // Call the debounced function
34
- await debouncedFn(5); // Will execute after 1000ms
35
-
36
- // With debug logging
37
- const debuggedFn = debounce(async (x: number) => x * 2, {
38
- wait: 1000,
39
- debug: true
92
+ import { debounce } from '@avatijs/debounce';
93
+
94
+ // Create a debounced function
95
+ const debouncedFn = debounce(async (value: string) => {
96
+ const result = await api.search(value);
97
+ updateUI(result);
98
+ }, {
99
+ wait: 300, // Wait 300ms after last call
100
+ leading: false, // Don't execute on leading edge
101
+ trailing: true, // Execute on trailing edge
102
+ maxWait: 1000, // Maximum time to wait
103
+ debug: true, // Enable debug logging
104
+ onError: console.error // Error handling
40
105
  });
41
106
 
42
- // With abort controller
43
- const controller = new AbortController();
44
- const abortableFn = debounce(async (x: number) => x * 2, {
45
- wait: 1000,
46
- signal: controller.signal
47
- });
48
-
49
- // Cleanup when done
50
- debouncedFn.cleanup();
51
- ```
52
-
53
- ## API Reference
54
-
55
- ### `debounce<T>(func: T, options?: DebounceOptions): DebouncedFunction<T>`
56
-
57
- Creates a debounced version of the provided function.
58
-
59
- #### Parameters
60
-
61
- ##### `func: T`
62
- The function to debounce. Can be synchronous or asynchronous.
63
-
64
- ##### `options: DebounceOptions`
65
- Configuration options for the debounced function.
66
-
67
- ```typescript
68
- interface DebounceOptions {
69
- readonly wait?: number; // Delay in milliseconds (default: 0)
70
- readonly leading?: boolean; // Execute on leading edge (default: false)
71
- readonly trailing?: boolean; // Execute on trailing edge (default: true)
72
- readonly maxWait?: number; // Maximum time to wait
73
- readonly debug?: boolean; // Enable debug logging (default: false)
74
- readonly signal?: AbortSignal; // AbortController signal
75
- }
76
- ```
77
-
78
- #### Returns
79
-
80
- Returns a debounced function with the following interface:
81
-
82
- ```typescript
83
- interface DebouncedFunction<T> {
84
- (...args: Parameters<T>): Promise<Awaited<ReturnType<T>>>;
85
- readonly cancel: () => void;
86
- readonly flush: (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>>;
87
- readonly pending: () => boolean;
88
- readonly cleanup: () => void;
107
+ // Use the debounced function
108
+ try {
109
+ await debouncedFn('search term');
110
+ } catch (error) {
111
+ handleError(error);
89
112
  }
90
113
  ```
91
114
 
92
- ## Advanced Usage Examples
93
-
94
- ### Leading Edge Execution
95
-
96
- ```typescript
97
- const leadingDebounce = debounce(
98
- (value: string) => console.log(value),
99
- {
100
- wait: 1000,
101
- leading: true,
102
- trailing: false
103
- }
104
- );
105
-
106
- // Executes immediately, then ignores calls for 1000ms
107
- leadingDebounce("First");
108
- leadingDebounce("Second"); // Ignored
109
- leadingDebounce("Third"); // Ignored
110
- ```
111
-
112
- ### Maximum Wait Time
113
-
114
- ```typescript
115
- const maxWaitDebounce = debounce(
116
- (value: string) => console.log(value),
117
- {
118
- wait: 1000,
119
- maxWait: 5000
120
- }
121
- );
122
-
123
- // Will execute after 5000ms maximum, even if called continuously
124
- const interval = setInterval(() => maxWaitDebounce("test"), 100);
125
- ```
126
-
127
- ### With AbortController
128
-
129
- ```typescript
130
- const controller = new AbortController();
131
-
132
- const abortableDebounce = debounce(
133
- async (value: string) => {
134
- await someAsyncOperation(value);
135
- },
136
- {
137
- wait: 1000,
138
- signal: controller.signal
139
- }
140
- );
141
-
142
- // Later, abort all pending operations
143
- controller.abort();
144
- ```
145
-
146
- ### Debug Mode
147
-
148
- ```typescript
149
- const debugDebounce = debounce(
150
- (value: string) => console.log(value),
151
- {
152
- wait: 1000,
153
- debug: true
154
- }
155
- );
156
-
157
- // Will log detailed information about internal state
158
- debugDebounce("test");
159
- ```
160
-
161
- ### Handling Return Values
162
-
163
- ```typescript
164
- const asyncDebounce = debounce(
165
- async (x: number): Promise<number> => {
166
- await delay(100);
167
- return x * 2;
168
- },
169
- { wait: 1000 }
170
- );
171
-
172
- // Get the result
173
- const result = await asyncDebounce(5);
174
- console.log(result); // 10
175
- ```
176
-
177
- ### Cleanup
178
-
179
- ```typescript
180
- const debouncedFn = debounce((x: number) => x * 2, { wait: 1000 });
181
-
182
- // Use the function
183
- debouncedFn(5);
184
-
185
- // Clean up when done
186
- debouncedFn.cleanup();
187
- ```
188
-
189
- ## Best Practices
190
-
191
- 1. **Always Clean Up**: Call `cleanup()` when you're done with the debounced function to prevent memory leaks:
115
+ ## Features
192
116
 
193
- ```typescript
194
- const debouncedFn = debounce(myFunc, { wait: 1000 });
117
+ - **Type Safety**: Full TypeScript support with intelligent type inference
118
+ - **Promise Support**: Built-in handling of async functions
119
+ - **Cancellation**: Support for AbortController and manual cancellation
120
+ - **Maximum Wait**: Configure maximum delay before forced execution
121
+ - **Edge Control**: Configure execution on leading and/or trailing edge
122
+ - **Debug Mode**: Comprehensive logging for development
123
+ - **Error Handling**: Robust error handling with custom callbacks
124
+ - **Resource Management**: Automatic cleanup of resources
125
+ - **Memory Efficient**: Proper cleanup and memory management
195
126
 
196
- // When done:
197
- debouncedFn.cleanup();
198
- ```
199
127
 
200
- 2. **Error Handling**: Always handle potential errors in async operations:
201
128
 
202
- ```typescript
203
- const debouncedFn = debounce(async () => {
204
- try {
205
- await debouncedOperation();
206
- } catch (error) {
207
- // Handle error
208
- }
209
- });
210
- ```
129
+ ## Changelog
211
130
 
212
- 3. **TypeScript Usage**: Leverage TypeScript's type system:
131
+ Please see [CHANGELOG](./CHANGELOG.md) for more information what has changed recently.
213
132
 
214
- ```typescript
215
- interface MyFuncParams {
216
- id: number;
217
- name: string;
218
- }
133
+ ## Contributing
219
134
 
220
- const typedDebounce = debounce(
221
- (params: MyFuncParams) => console.log(params),
222
- { wait: 1000 }
223
- );
135
+ I welcome contributions from developers of all experience levels. If you have an idea, found a bug, or want to improve something, I encourage you to get involved!
224
136
 
225
- // TypeScript will enforce correct parameter types
226
- typedDebounce({ id: 1, name: "test" });
227
- ```
137
+ ### How to Contribute
138
+ 1. Read [Contributing Guide](https://github.com/KhaledSMQ/avati/blob/master/Contributing.md) for details on how to get started.
139
+ 2. Fork the repository and make your changes.
140
+ 3. Submit a pull request, and weโ€™ll review it as soon as possible.
228
141
 
229
- ## Common Gotchas
142
+ ## License
230
143
 
231
- 1. **Memory Leaks**: Not calling `cleanup()` when done can lead to memory leaks.
232
- 2. **Shared State**: Be careful with shared state in debounced functions.
233
- 3. **Error Handling**: Always handle potential errors in async operations.
234
- 4. **Maximum Wait Time**: Setting `maxWait` less than `wait` will throw an error.
144
+ [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/KhaledSMQ/avati/blob/master/LICENSE)
235
145
 
236
- ## Contributing
146
+ Avati is open-source and distributed under the [MIT License](https://github.com/KhaledSMQ/avati/blob/master/LICENSE).
237
147
 
238
- Contributions are welcome! Please read our [contributing guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
148
+ ---
149
+ <div align="center">
239
150
 
240
- ## License
151
+ [![Follow on Twitter](https://img.shields.io/twitter/follow/KhaledSMQ.svg?style=social)](https://x.com/khaledsmq_)
152
+ [![Follow on LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue.svg)](https://www.linkedin.com/in/khaledsmq/)
153
+ [![Follow on Medium](https://img.shields.io/badge/Medium-Follow-black.svg)](https://medium.com/@khaled.smq)
154
+ [![Made with โค๏ธ](https://img.shields.io/badge/Made%20with-โค๏ธ-red.svg)](https://github.com/KhaledSMQ)
155
+ [![Star on GitHub](https://img.shields.io/github/stars/KhaledSMQ/avati.svg?style=social)](https://github.com/KhaledSMQ/avati/stargazers)
156
+ [![Follow on GitHub](https://img.shields.io/github/followers/KhaledSMQ.svg?style=social&label=Follow)](https://github.com/KhaledSMQ)
241
157
 
242
- This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
158
+ </div>