Side navigation
#2250 closed enhancement (invalid)
Opened January 28, 2008 08:51PM UTC
Closed July 01, 2008 03:08AM UTC
Last modified March 15, 2012 09:58AM UTC
Addition of "delayed" method to jQuery
Reported by: | bfattori | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.3 |
Component: | core | Version: | 1.2.2 |
Keywords: | delayed,timeout | Cc: | |
Blocked by: | Blocking: |
Description
Purpose: delays execution of a call to jQuery object by a set amount of time. Unlike just setting a simple timeout, the "this" pointer inside the executed callback will be the jQuery object used to assign the delay. For example:
delayedFadeOut: function(delay, speed, callback) { this.delayed(delay, function() { this.fadeOut(speed, callback); }); return this; }
Thus, you could write:
var myFn = ; $(".myClass").delayedFadeOut(250, "normal", function() { $(this).css("background-color", "blue"); });
Within the callback, you have access to the jQuery object so, in the example, all of the elements with the "myClass" class would get the background color of blue when the fade completes. The nice part is, the fade doesn't occur until the timeout has expired.
Here is the new method:
delayed: function(delay, callback) { var delayFn = function() { arguments.callee.jQ.each(function() { arguments.callee.callback.call(arguments.callee.jQ); }); }; delayFn.jQ = this; delayFn.callback = callback; return setTimeout(delayFn, delay); }
I use method wrapping to avoid closures and memory leaks in the delayFn method below. An example of my use is to delay a hover state so that the overlayed button doesn't appear immediately. I find this very handy instead of creating a ton of "window.timeout" calls.
Arggg... ignore the "var myFn = ;" in the second code block. :-/