jQuery delay gets ignored and executes siblings

Question

I'm using jQuery version 1.7.1 from Google CDN and have the following code:

$(menuInstance).delay(2000).removeClass('loading').html(ul);

However the delay is ignored and it moves straight onto my remove class and insert HTML. Any ideas why the delay is being ignored? Thanks

Are you invoking that code inside a `$(document).ready()` block? — Miguel Ping, Mar 26 '12 at 13:56
http://api.jquery.com/delay/ : "Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue." `removeClass` also does not use the effects queue. (Don't feel bad; we've all tried to use `delay()` that way at some point.) — Blazemonger, Mar 26 '12 at 13:59

score 4 · Accepted Answer · answered Mar 26 '12 at 13:56

4

You can't use .delay like that. You need to use setTimeout.

setTimeout(function() {
  $(menuInstance).removeClass('loading').html(ul);
}, 2000);

delay can only be used for animation queues.

answered Mar 26 '12 at 13:56

Dogbert

212,659
41
396
397

score 3 · Answer 2 · answered Mar 26 '12 at 13:56

3

delay only works for methods that can be queued like animations: http://api.jquery.com/delay/

You will need to use a timeout. Our you could use http://api.jquery.com/queue/

answered Mar 26 '12 at 13:56

meo

30,872
17
87
123

score 3 · Answer 3 · answered Mar 26 '12 at 13:58

That is not what .delay() does..

Check the documentation at http://api.jquery.com/delay/

Quote

Description: Set a timer to delay execution of subsequent items in the queue.

and

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.

As you can see it only works with jQuery queues.

score 3 · Answer 4 · answered Mar 26 '12 at 14:00

3

http://jsbin.com/ohipew/edit#javascript,html

 $(menuInstance).delay(2000).queue(

  function (a)
  {
      $(this).removeClass('loading').html(ul)
  });

answered Mar 26 '12 at 14:00

Royi Namir

144,742
138
468
792

score 1 · Answer 5 · edited May 23 '17 at 12:27

1

.delay() is for delaying jquery visual effects. for .remove() you should use setTimeout.

see also: jQuery: append() object, remove() it with delay()

edited May 23 '17 at 12:27

Community

1
1

answered Mar 26 '12 at 13:58

mamoo

8,156
2
28
38

jQuery delay gets ignored and executes siblings

5 Answers5