Debounces batched browser event callback execution until the last event within a given time period. The utility returns a key upon initial event attachment which can be later used to add multiple callbacks to the same debounced event batch by given element, event name, and timeout. Debounced event batches can be manually detached, or will detach automatically if the callback is specified to be executed only once and there are no other callbacks left in the event batch.
Script include creates global DebounceEvent:
<script src="debounce-event.min.js"></script>AMD:
<script src="debounce-event.min.js"></script>
<script>
define(['debounce-event'], function(DebounceEvent) {
// do something
})
</script>CommonJS:
$ npm install debounce-eventvar DebounceEvent = require('debounce-event')DebounceEvent.attach() takes an object with the following named parameters:
| Name | Description | Required |
|---|---|---|
| elem | DOM element to attach the event handler. | if eventKey not given |
| eventName | Name of the browser event to handle. | if eventKey not given |
| done | Callback to execute on the debounced event. | always |
| timeout | Timeout (ms) at which to debounce the event callback. | always |
| once | True if the callback should execute only once. If the callback is the only one in its batch, its handler will be detached after the callback executes. Default is false. |
no |
| eventKey | Previously returned key of an event batch to add this callback. If this parameter is specified, eventName and elem are not used since an event batch uses a common event handler. |
no |
// Register the first event in a new event batch, set to execute only once
var eventKey = DebounceEvent.attach({
eventName: 'resize',
elem: window,
done: function() {
console.log('done 1')
},
timeout: 200,
once: true
})
// Register the second event in an existing event batch given the previous
// event key
DebounceEvent.attach({
eventKey: eventKey1,
done: function() {
console.log('done 2')
},
once: true
})
// Register the third event in a new event batch
var eventKey2 = DebounceEvent.attach({
eventName: 'resize',
elem: window,
done: function() {
console.log('done 3')
},
timeout: 300
})
// Manually detach the given event batch
DebounceEvent.detach(eventKey2)$ cd debounce-event
$ npm install
$ grunt install
$ grunt build
$ grunt test
# Build for release
$ grunt distCopyright (c) 2016 Greg Stallings. See LICENSE for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent