jQuery delay to work with append()

Question

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.

Answer 1

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.}

Answer 2

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.