Created
December 16, 2011 23:36
Delayed change jquery plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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