双重jQuery延迟（delay）的问题

Question

我正在尝试使用jQuery的AJAX函数，并试图模拟真实服务器会延迟本地主机上平稳数据请求的情况。

因此，我编写了类似于以下代码的代码：

$('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(' ');
        });
    });
});

我在这里的基本操作是延迟 $.post 方法2秒，以便可以看到“发布中...”消息。 当2秒时间结束后，我希望文本改变为我收到的响应，并保持1秒钟，然后淡出。

第一个延迟工作得非常完美，Ajax调用也完美地运行，但问题在于-由于某种原因，第二次延迟没有被读取，一旦显示了响应消息，它就无法消失 :)

我的问题是：为什么会发生这种情况，我该如何解决它？

- Maverick

---

有趣的问题，点赞！ - pixelbobby

我不了解delay方法，但似乎更准确地复制HTTP请求延迟应该在服务器端完成，通过在您的Ajax响应代码中包含某种sleep（）或其他内容。 - Andy Groff

Answer 1

你需要出队列以便处理队列中的下一个事项。

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

编辑：或者在1.4或更高版本中使用next：

在jQuery 1.4中，被调用的函数作为另一个函数的第一个参数传递进去，当它被调用时会自动出队下一个项目并保持队列移动。您可以像这样使用它：

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

来源：http://api.jquery.com/queue/

- James Montagne

---

@Husar，在我发帖的时候你已经选了一个答案 :-P - Naftali

Answer 2

你可以尝试我的waitForIt插件：

http://jsfiddle.net/maniator/Ad3pv/

在第二部分中，您需要做的只是：

$('#response').html(response).waitForit({
    function: 'fadeOut',
    options: 'slow',
    timeOut: 1000
});

- Naftali