By Randomblue


2011-09-13 20:19:23 8 Comments

According to jQuery document on .delay(),

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Could someone please expand on this? When is it more appropriate to use .delay(), and when is it better to use .setTimeout()?

5 comments

@Glen 2011-10-05 21:32:44

Another side effect of delay(): it seems to disable the ability to hide (or fadeOut, etc) the objecting being delayed, until the delay is over.

For example, I set up the following code (perhaps a stackoverflow developer will recognize the css names....) to hide a 'div':

 $j(document).ready(function(){
   var $messageDiv = $j("<div>").addClass('fading_message')
       .text("my alert message here").hide();
   var $closeSpan = $j("<span>").addClass('notify_close').text("x");
   $closeSpan.click(function() {$j(this).parent().slideUp(400);});
   $messageDiv.append($closeSpan);
   $j('.content_wrapper_div').prepend($messageDiv);
   $messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0);
 });

Clicking the "x" that's in the span (that's in the 'div') did fire off the click function (I tested with an alert in there), but the div didn't slideUp as directed. However, If I replace the last line with this:

     $messageDiv.fadeTo(500, .9);

..then it did work - when I clicked the "x", the surrounding div slideUp and and away. It seems as if the background running of the "delay()" function on the $messageDiv "locked" that object, so that a separate mechanism trying to close it couldn't do so until the delay was done.

@Derrick Tucker 2011-09-13 20:32:37

As far as I understand, .delay() is meant specifically for adding a delay between methods in a given jQuery queue. For example, if you wanted to fade an image into view during the span of 1 second, have it visible for 5 seconds, and then spend another second to fade it out of view again, you could do the following:

$('#image').fadeIn(1000).delay(5000).fadeOut(1000);

In this instance, .delay() is more intuitive to use since it is specifically meant for delaying events in a given jQuery queue. setImeout(), on the other hand, is a native JavaScript method that isn't intended explicitly for a queue line. If you wanted an alert box to pop up 1 second after clicking on a button, you could do the following:

function delayAlert() {
    var x = setTimeout("alert('5 seconds later!')", 5000);
}

<input type="submit" value="Delay!" onclick="delayAlert();" />

@Guffa 2011-09-13 20:28:38

You can use delay with animations, for example:

$('.message').delay(5000).fadeOut();

You can also use timeOut to delay the start of animations, for example:

window.setTimeout(function(){
  $('.message').fadeOut();
}, 5000);

As you see, it's easier to use delay than setTimeout with animations.

You can delay pretty much anything with setTimeout, but you can only delay animations with delay. Methods that aren't animations are not affected by delay, so this would not wait a while before hiding the element, it would hide it immediately:

$('.message').delay(5000).hide();

@Shef 2011-09-13 20:30:34

"Methods that aren't animations are not affected by delay" I am pretty sure they can be!

@Rafay 2011-09-13 20:31:03

not if you use hide(0) jsfiddle.net/9svb6/2

@Guffa 2011-09-13 21:15:28

@Shef: The delay method only affects items in the animation queue. If you want a non-animation to be affected, you have to put in the animation queue, effectively making it an animation.

@Guffa 2011-09-13 21:15:55

@3nigma: "When a duration is provided, .hide() becomes an animation method." api.jquery.com/hide

@Shef 2011-09-14 06:36:17

@adamjmarkham 2011-09-13 20:26:05

I think what you posted explains itself really.

Use .delay() for jQuery effects including animations.

setTimeout() is best used for everything else. For example when you need to trigger an event at a certain elapsed time.

@sdleihssirhc 2011-09-13 20:27:28

...Or when you want to be able to cancel the delay.

@klewis 2015-11-10 17:54:47

Just keep in mind you can't cancel a delay, if for some reason you want to advance your animation, but you can with setTimeout.

@sberry 2011-09-13 20:25:30

.delay() is mostly used for chaining together animation effects with pauses in between.

As the docs mention, there is no way to cancel the delay. In the case where you may want to cancel the delay, a setTimeout() should be used instead so you can cancel it with clearTimeout()

Related Questions

Sponsored Content

22 Answered Questions

[SOLVED] How can I pass a parameter to a setTimeout() callback?

25 Answered Questions

[SOLVED] How to delay the .keyup() handler until the user stops typing?

  • 2009-12-15 18:33:27
  • ajsie
  • 227445 View
  • 577 Score
  • 25 Answer
  • Tags:   javascript jquery

4 Answered Questions

[SOLVED] Difference between setTimeout with and without quotes and parentheses

2 Answered Questions

3 Answered Questions

3 Answered Questions

[SOLVED] jQuery settimeout() not working correctly

1 Answered Questions

2 Answered Questions

[SOLVED] How to clear setTimeout() and jQuery fadeOut() before either are done?

  • 2012-09-30 23:22:34
  • Ryan
  • 9568 View
  • 1 Score
  • 2 Answer
  • Tags:   javascript jquery

1 Answered Questions

[SOLVED] jQuery setTimeout on toggle class

3 Answered Questions

jQuery delay vs. setTimeout for jackpot "spinner" image swapping

Sponsored Content