Using delay with HTML or text setting doesn't work

Question

I have strange problem with the delay function here using the HTML function with it.

I set an HTML text by using $( '#element').html( 'Hello World');

After setting the text I want to get this text disappear in 3 seconds.

So next line I wrote:

$('#element').delay( 3000).html( '&nbsp');

This one doesn't work, it sets the HTML to &nbsp without waiting the 3 seconds, it looks like jQuery is skipping the delay function. Using this with fadeOut for example works fine. I guess this has something to do with this queue thing in delay.

But why doesn't this work. Its a pretty simple, wait 3 seconds then run the HTML function.

Andy E · Accepted Answer · 2010-09-09 11:40:56Z

25

delay() defaults to the animation queue, for effects like fadeOut(), etc. You should use setTimeout() instead:

window.setTimeout(function () {
    $("#element").html('&nbsp;');
}, 3000);

From http://api.jquery.com/delay/:

jQuery.delay() is best for delaying between queued jQuery effects and such, and is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

edited Sep 9, 2010 at 11:40

answered Sep 9, 2010 at 11:15

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nick Craver Over a year ago

To be more accurate, .delay() applies to any queue, it just defaults to the animation queue :)

NovumCoder Over a year ago

Thanks this one is working now. One more question: does this work on all browsers? im not sure if window.setTimeout will work in all IE and FF versions.

Andy E Over a year ago

@NovumCoder: window.setTimeout() goes way back to JavaScript 1.0 and was adopted by IE in IE 5 (I think). I've yet to discover a browser that doesn't implement it, and now it's part of the proposed HTML5 specification

Nick Craver · Accepted Answer · 2010-09-09 11:15:11Z

16

.html() isn't a queued function. If you want it to happen in order in the animation queue, you'll have to .queue() it yourself, like this:

$('#element').delay(3000).queue(function(n) { 
  $(this).html('&nbsp'); n();
});

If you're not chaining animations or anything like this, use setTimeout() or setInterval() (whichever is appropriate to the situation) directly, .delay() is just a wrapper for setTimeout() and there's no reason to use extra code/complexity when there's no need.

answered Sep 9, 2010 at 11:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

Using delay with HTML or text setting doesn't work

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related