jQuery Delay Plugin

Posted on Nov. 16th, 2008 11:05 AM in JavaScript

A simple jQuery plugin that allows you to add a delay between jQuery functions. This small but very useful plugin that has saved me a lot of time. I haven't done a lot of testing, but because the plugin is so small and simple (only 212 bytes!) I don't think I could have missed much! ^^

Code Example

// Wait for #link to be clicked...
$("#link").click(function(){

  // Delay 1 second...
  $(this).delay(1000,function(){

    // Then display #hello
    $("#hello").css("display","block");

    // Then delay another 3 seconds...
    $(this).delay(3000,function(){

      // Change text color to blue
      $("#hello").css("color","blue");

    });
  });
});

Download (212 bytes):
http://www.evanbot.com/bin/2008/11/jquery-delay/jquery-delay.zip

Comments (10)

Post Comment

Gabe

THANK YOU! I love jQuery, but have always struggled with getting a proper delay, I can't wait to start using this plugin. Nov. 17th, 2008 8:27 AM

Evan

You're welcome. I'm glad someone other than me has a use for this plugin! :-DNov. 17th, 2008 10:30 AM

Krishna Kastubi

Thank you... just what i neededNov. 18th, 2008 12:05 AM

gregf

Can use this on my project as well. Thanks.Nov. 18th, 2008 11:50 AM

Stephen Cronin

Hi,

Is there a minimum timeout, like there is with setTimeout()? Presumably there would have to be right?Nov. 19th, 2008 1:17 AM

strx

why don't use

setTimeout(fn, 1000);
setTimeout(fn2, 4000);

?Nov. 19th, 2008 4:55 AM

Evan

@Stephen: Yes, the minimum timeout should be exactly the same as with setTimout()

@strx: Yes you could use setTimeout, but it is much easier to read this:

$(this).delay(1000,function(){ // A bunch of code // More... // Even more });

Than it is to read this:

setTimeout(function(){ // A bunch of code // Something... // Even more },1000);

Also, I have found using pure setTimeout() is picky about infinite loops.Nov. 19th, 2008 10:34 AM

santiag0

Brillant, thanks a lot!Nov. 19th, 2008 8:52 PM

BBrian

Perfect for making jquery wait before the next action. Pause() didn't work for me.Dec. 15th, 2008 11:32 AM

Jim Jeffers

Great work Evan! This is very comparable to prototype's delay method. It would still be ideal to have a way to 'cancel' these call backs. For instance I do this on drop down menus so that an accidental mouseout won't cause the menu to disappear.

For instance: on mouse out we set a time out for 500ms or so and store the call back in a variable.

On mouse over we check for the variable storing the timeout and set it to false if it exists thus canceling the effect.

I'm wondering if there would be a simple way to get this effect done the jQuery way by creating a singleton to store all of the requests created in the loop. Just some food for thought.Jan. 4th, 2009 2:27 PM

www.EvanBot.com

jQuery Delay Plugin

Comments (10)

Post A Comment

Article Tags

Recent Comments

Sponsored Link