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

Post A Comment

Name:


Email:


Website:


captcha
Enter the Characters Above:


Comments:


Article Tags

Computers (1)
Freebies (3)
JavaScript (1)
PHP (1)

Recent Comments

Jim Jeffers on jQuery Delay Plugin
Posted on Jan. 4th, 2009 2:27 PM

BBrian on jQuery Delay Plugin
Posted on Dec. 15th, 2008 11:32 AM

Evan on Free Vector Hearts Graphics Set
Posted on Nov. 26th, 2008 1:18 PM

stelt on Free Vector Hearts Graphics Set
Posted on Nov. 26th, 2008 11:22 AM

Travis on Edit Your Computer's HOSTS File for Speed and Fun
Posted on Nov. 23rd, 2008 10:26 AM

Sponsored Link

Theme Frost Website Templates

 
Proudly Hosted by Peachy Dandy