Skip to content

Instantly share code, notes, and snippets.

@spalladino
Created December 16, 2011 23:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save spalladino/1488534 to your computer and use it in GitHub Desktop.
Save spalladino/1488534 to your computer and use it in GitHub Desktop.
Delayed change jquery plugin
(function($){
$.delayedChangeDelay = 1000;
$.checkUpdateTime = 500;
// Special event definition.
$.event.special.delayedChange = {
setup: function( params ) {
// Add data and handlers to other events
$(this)
.data( 'delayedChange', {
nextUpdate: 0,
needsUpdate: false,
delay: params,
interval: window.setInterval(createCheckUpdateFor(this), $.checkUpdateTime)
})
.bind( 'change', signalNeedsUpdate )
.bind( 'keydown', signalNeedsUpdate );
},
teardown: function() {
// Stop check update for this element
var interval = $(this).data('delayedChange').interval;
window.clearInterval(interval);
// Remove all handlers and data
$(this)
.removeData( 'delayedChange' )
.unbind( 'change', signalNeedsUpdate )
.unbind( 'keydown', signalNeedsUpdate );
}
};
// This function is executed every time an element is modified.
function signalNeedsUpdate ( event ) {
// Get plugin data stored on the element.
var elem = $(this);
var data = elem.data( 'delayedChange' );
var delay = data.delay || $.delayedChangeDelay;
data.needsUpdate = true;
data.nextUpdate = new Date().getTime() + delay;
};
// Creates a check update handler attached to the set element
function createCheckUpdateFor(elem) {
return function() {
checkUpdate(elem);
};
};
// Function invoked every X millis for checking update
function checkUpdate(elem) {
var elem = $(elem);
// Get plugin data stored on the element.
var data = elem.data( 'delayedChange' ),
delay = data.delay || $.delayedChangeDelay,
nextUpdate = data.nextUpdate,
needsUpdate = data.needsUpdate;
// If update is needed and enough time has passed, then fire the event
if (!needsUpdate) return;
var nowMillis = new Date().getTime();
var diff = nowMillis - nextUpdate;
if (diff > 0) {
data.needsUpdate = false;
elem.triggerHandler( 'delayedChange' );
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment