source: imaps-frontend/node_modules/throttle-debounce/README.md

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 5.7 KB
Line 
1# throttle-debounce
2
3[![Build Status][ci-img]][ci]
4[![BrowserStack Status][browserstack-img]][browserstack]
5[![Mentioned in Awesome Micro npm Packages][awesome-img]][awesome]
6
7Throttle and debounce functions.
8
9This module is the same as [jquery-throttle-debounce][jquery-throttle-debounce]
10([with some differences](#differences-with-original-module)), but it’s
11transferred to ES Modules and CommonJS format.
12
13## Install
14
15```sh
16npm install throttle-debounce --save
17```
18
19## Usage
20
21### `throttle`
22
23```js
24import { throttle } from 'throttle-debounce';
25
26const throttleFunc = throttle(1000, false, (num) => {
27 console.log('num:', num);
28});
29
30// Can also be used like this, because noTrailing is false by default
31const throttleFunc = throttle(1000, (num) => {
32 console.log('num:', num);
33});
34
35throttleFunc(1); // Will execute the callback
36throttleFunc(2); // Won’t execute callback
37throttleFunc(3); // Won’t execute callback
38
39// Will execute the callback, because noTrailing is false,
40// but if we set noTrailing to true, this callback won’t be executed
41throttleFunc(4);
42
43setTimeout(() => {
44 throttleFunc(10); // Will execute the callback
45}, 1200);
46
47// Output
48// num: 1
49// num: 4
50// num: 10
51```
52
53### `debounce`
54
55```js
56import { debounce } from 'throttle-debounce';
57
58const debounceFunc = debounce(1000, false, (num) => {
59 console.log('num:', num);
60});
61
62// Can also be used like this, because atBegin is false by default
63const debounceFunc = debounce(1000, (num) => {
64 console.log('num:', num);
65});
66
67// Won’t execute the callback, because atBegin is false,
68// but if we set atBegin to true, this callback will be executed.
69debounceFunc(1);
70
71debounceFunc(2); // Won’t execute callback
72debounceFunc(3); // Won’t execute callback
73
74// Will execute the callback,
75// but if we set atBegin to true, this callback won’t be executed.
76debounceFunc(4);
77
78setTimeout(() => {
79 debounceFunc(10); // Will execute the callback
80}, 1200);
81
82// Output
83// num: 4
84// num: 10
85```
86
87### Cancelling
88
89Debounce and throttle can both be cancelled by calling the `cancel` function.
90
91```js
92const throttleFunc = throttle(300, () => {
93 // Throttled function
94});
95
96throttleFunc.cancel();
97
98const debounceFunc = debounce(300, () => {
99 // Debounced function
100});
101
102debounceFunc.cancel();
103```
104
105The logic that is being throttled or debounced will no longer be called.
106
107## API
108
109### throttle(delay, noTrailing, callback, debounceMode)
110
111Returns: `Function`
112
113Throttle execution of a function. Especially useful for rate limiting execution
114of handlers on events like resize and scroll.
115
116#### delay
117
118Type: `Number`
119
120A zero-or-greater delay in milliseconds. For event callbacks, values around 100
121or 250 (or even higher) are most useful.
122
123#### noTrailing
124
125Type: `Boolean`
126
127Optional, defaults to false. If noTrailing is true, callback will only execute
128every `delay` milliseconds while the throttled-function is being called. If
129noTrailing is false or unspecified, callback will be executed one final time
130after the last throttled-function call. (After the throttled-function has not
131been called for `delay` milliseconds, the internal counter is reset)
132
133#### callback
134
135Type: `Function`
136
137A function to be executed after delay milliseconds. The `this` context and all
138arguments are passed through, as-is, to `callback` when the throttled-function
139is executed.
140
141#### debounceMode
142
143Type: `Boolean`
144
145If `debounceMode` is true (at begin), schedule `clear` to execute after `delay`
146ms. If `debounceMode` is false (at end), schedule `callback` to execute after
147`delay` ms.
148
149### debounce(delay, atBegin, callback)
150
151Returns: `Function`
152
153Debounce execution of a function. Debouncing, unlike throttling, guarantees that
154a function is only executed a single time, either at the very beginning of a
155series of calls, or at the very end.
156
157#### delay
158
159Type: `Number`
160
161A zero-or-greater delay in milliseconds. For event callbacks, values around 100
162or 250 (or even higher) are most useful.
163
164#### atBegin
165
166Type: `Boolean`
167
168Optional, defaults to false. If `atBegin` is false or unspecified, callback will
169only be executed `delay` milliseconds after the last debounced-function call. If
170`atBegin` is true, callback will be executed only at the first
171debounced-function call. (After the throttled-function has not been called for
172`delay` milliseconds, the internal counter is reset).
173
174#### callback
175
176Type: `Function`
177
178A function to be executed after delay milliseconds. The `this` context and all
179arguments are passed through, as-is, to `callback` when the debounced-function
180is executed.
181
182## Differences with original module
183
184- Dependancy on jQuery is removed, so if you rely on GUIDs set by jQuery, plan
185 accordingly
186- There is no standalone version available, so don’t rely on `$.throttle` and
187 `$.debounce` to be available
188
189## Browser support
190
191Tested in IE9+ and all modern browsers.
192
193## Test
194
195For automated tests, run `npm run test:automated` (append `:watch` for watcher
196support).
197
198## License
199
200<!-- prettier-ignore-start -->
201
202**Original module license:** Copyright (c) 2010 "Cowboy" Ben Alman (Dual licensed under the MIT and GPL licenses. http://benalman.com/about/license/)
203**This module license:** MIT © [Ivan Nikolić](http://ivannikolic.com)
204
205[ci]: https://travis-ci.org/niksy/throttle-debounce
206[ci-img]: https://travis-ci.org/niksy/throttle-debounce.svg?branch=master
207[browserstack]: https://www.browserstack.com/
208[browserstack-img]: https://www.browserstack.com/automate/badge.svg?badge_key=Nk5yb0tacXhxVmlCOFR1N0syc3kzWG1LYkFmNFRjdU1QTlBsbXk3VWc5cz0tLW1hMy9WQjloZEkwVTkvRHF5ZkJTbkE9PQ==--1488ac471ddd57ff9f5e2f467575f5b80bfa3752
209[awesome]: https://github.com/parro-it/awesome-micro-npm-packages
210[awesome-img]: https://awesome.re/mentioned-badge.svg
211[jquery-throttle-debounce]: https://github.com/cowboy/jquery-throttle-debounce
212
213<!-- prettier-ignore-end -->
Note: See TracBrowser for help on using the repository browser.