8

I can't make the delay function of jQuery works with append function. What is wrong? Is there a way to make it work? I want to avoid using setTimeout directly to make it more easy to follow for the customer, who will maintain it himself, without any experience.

My code:

$('#chatwindow').append('test').delay(2000).append('test');

In this code, I get 'testtest' printed at the same time, delay is ignored.

3

3 Answers 3

26

This is because delay(2000) queues the fx queue by default, which append() is never part of.

Instead, you can specifically queue append() on it using the queue() function.

$('#chatwindow').append('test').delay(2000).queue(function (next) {
    $(this).append('test');
    next();
});

You can see an example of this working here; http://jsfiddle.net/mj8qC/

However, I agree with @ascii-lime's comment; I expect the customer will have more chance understanding setTimeout as it's a fundamental part of JavaScript, unlike delay(), which confuses many users (from experience on questions asked on StackOverflow).

FWIW, this question triggered me to write a blog post on the uses of delay(); it goes into more detail than this answer, and might be great further reading for others.

4
  • 3
    While there are several answers here, showing how to work with queues in jquery is such a huge piece of information. Definitely the best answer.
    – Ohgodwhy
    Jun 18, 2012 at 15:06
  • 2
    +1 append By default is not queued, it is executed immediately, because it is not used for animations. This will add it to the queue. Whether this is simpler to understand than setTimeout for the OP's client is debatable, but this answer is definitely the most informative.
    – Paul
    Jun 18, 2012 at 15:06
  • You can also quote the jQuery docs on it :) "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."
    – Paul
    Jun 18, 2012 at 15:12
  • I'm among the ones very wary about this delay function. It looks at first like a generic magic function and then you read the jquery source code to understand and see its usages are very limited. They should probably have called it clearly to show it's mainly for delaying an effect. Jun 18, 2012 at 15:13
3

delay() is a tricky function that can't be use with anything : it's mainly made for effects (it returns immediately, it doesn't block the javascript execution flow).

From the doc :

It can be used with the standard effects queue or with a custom queue

(so you have to use a custom queue if you're not using the fx queue)

Use setTimeout in this case.

1

Yes. The return from delay is immediate. Nothing in your code suggest that the reurn should wait. You need to use setTimeout for the engine to wait..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.