Throttle and debounce functions.
This module is the same as jquery-throttle-debounce (with some differences), but it’s transferred to ES Modules and CommonJS format.
npm install throttle-debounce --saveimport { throttle } from 'throttle-debounce';
const throttleFunc = throttle(
1000,
(num) => {
console.log('num:', num);
},
{ noLeading: false, noTrailing: false }
);
// Can also be used like this, because noLeading and noTrailing are false by default
const throttleFunc = throttle(1000, (num) => {
console.log('num:', num);
});
throttleFunc(1); // Will execute the callback
throttleFunc(2); // Won’t execute callback
throttleFunc(3); // Won’t execute callback
// Will execute the callback, because noTrailing is false,
// but if we set noTrailing to true, this callback won’t be executed
throttleFunc(4);
setTimeout(() => {
throttleFunc(10); // Will execute the callback
}, 1200);
// Output
// num: 1
// num: 4
// num: 10import { debounce } from 'throttle-debounce';
const debounceFunc = debounce(
1000,
(num) => {
console.log('num:', num);
},
{ atBegin: false }
);
// Can also be used like this, because atBegin is false by default
const debounceFunc = debounce(1000, (num) => {
console.log('num:', num);
});
// Won’t execute the callback, because atBegin is false,
// but if we set atBegin to true, this callback will be executed.
debounceFunc(1);
debounceFunc(2); // Won’t execute callback
debounceFunc(3); // Won’t execute callback
// Will execute the callback,
// but if we set atBegin to true, this callback won’t be executed.
debounceFunc(4);
setTimeout(() => {
debounceFunc(10); // Will execute the callback
}, 1200);
// Output
// num: 4
// num: 10Debounce and throttle can both be cancelled by calling the cancel function.
const throttleFunc = throttle(300, () => {
// Throttled function
});
throttleFunc.cancel();
const debounceFunc = debounce(300, () => {
// Debounced function
});
debounceFunc.cancel();The logic that is being throttled or debounced will no longer be called.
To cancel only one upcoming debounced call, you can pass upcomingOnly: true
option to cancel function:
const debounceFunc = debounce(300, () => {
// Debounced function
});
debounceFunc(); // will not be invoked
debounceFunc.cancel({ upcomingOnly: true });
debounceFunc(); // will be invokedReturns: Function
Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.
Type: Number
A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
Type: Function
A function to be executed after delay milliseconds. The this context and all
arguments are passed through, as-is, to callback when the throttled-function
is executed.
Type: Boolean
Optional, defaults to false. If noTrailing is true, callback will only execute
every delay milliseconds while the throttled-function is being called. If
noTrailing is false or unspecified, callback will be executed one final time
after the last throttled-function call. (After the throttled-function has not
been called for delay milliseconds, the internal counter is reset)
Type: Boolean
Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that callback will never executed if both noLeading = true and noTrailing = true.
Type: Boolean
If debounceMode is true (at begin), schedule clear to execute after delay
ms. If debounceMode is false (at end), schedule callback to execute after
delay ms.
Returns: Function
Debounce execution of a function. Debouncing, unlike throttling, guarantees that a function is only executed a single time, either at the very beginning of a series of calls, or at the very end.
Type: Number
A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
Type: Function
A function to be executed after delay milliseconds. The this context and all
arguments are passed through, as-is, to callback when the debounced-function
is executed.
Type: Boolean
Optional, defaults to false. If atBegin is false or unspecified, callback will
only be executed delay milliseconds after the last debounced-function call. If
atBegin is true, callback will be executed only at the first
debounced-function call. (After the throttled-function has not been called for
delay milliseconds, the internal counter is reset).
- Dependancy on jQuery is removed, so if you rely on GUIDs set by jQuery, plan accordingly
- There is no standalone version available, so don’t rely on
$.throttleand$.debounceto be available
Tested in Chrome 72, Edge 15, Firefox 65 and should work in all modern browsers (support based on Browserslist configuration).
For automated tests, run npm run test:automated (append :watch for watcher
support).
Original module license: Copyright (c) 2010 "Cowboy" Ben Alman (Dual licensed under the MIT and GPL licenses. http://benalman.com/about/license/)
This module license: MIT © Ivan Nikolić
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent