Problem with double jQuery delay()

Question

I am messing around with jQuery's AJAX functions and was trying to simulate how a real server would delay the otherwise smooth data requests that I get on local-host.

So I have written code that is similar to this:

$('form').submit(function (event) {
    event.preventDefault();

$('#response').html('<p>Posting...</p>').fadeIn().delay(2000).queue(function () {
        $.post (
        'some_url.php', 
        {/*values here*/},
        function (response) {
            $('#response').html(response).delay(1000).fadeOut('slow');

            //The line below is to reset the form element
            $('input[type="text"], textarea').val(' ');
        });
    });
});

What I basically do here is I delay the $.post method by 2sec so that the "Posting...' message can be seen. When the 2sec are finished I want the text to be changed with the response I got, stay still for 1 sec and that I want it to fade out.

The first delay works perfect, also the Ajax call works perfectly, problem is - from some reason the second delay is not read and the response message, once shown, refuses to disappear :)

My question is why does this happen and how can I fix it?

Answer 1

You need to dequeue in order for the next thing in the queue to be processed.

http://api.jquery.com/jQuery.dequeue/

EDIT: Or next in 1.4 or greater:

In jQuery 1.4 the function that's called is passed in another function, as the first argument, that when called automatically dequeues the next item and keeps the queue moving. You would use it like so:

$("#test").queue(function(next) {
     // Do some stuff...
     next(); 
});

from: http://api.jquery.com/queue/