Skip to content

Debounces batched browser event callback execution until the last event within a given time period. The utility provides support for attaching multiple callbacks to the same debounced event batch, manual detaching of batches, and the option to execute callbacks only once.

License

Notifications You must be signed in to change notification settings

goodtimeaj/debounce-event

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Debounce Event

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.

Usage

Include

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-event
var DebounceEvent = require('debounce-event')

API

Debounce Initializer Parameters

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

Example

// 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)

Development

$ cd debounce-event
$ npm install
$ grunt install
$ grunt build
$ grunt test

# Build for release
$ grunt dist

License

Copyright (c) 2016 Greg Stallings. See LICENSE for details.

About

Debounces batched browser event callback execution until the last event within a given time period. The utility provides support for attaching multiple callbacks to the same debounced event batch, manual detaching of batches, and the option to execute callbacks only once.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published