延迟或排队让 AJAX 到 .append(data)答案

【问题标题】：Getting AJAX to .append(data) with a delay or queue延迟或排队让 AJAX 到 .append(data)
【发布时间】：2012-01-11 11:46:11
【问题描述】：

因此，由于睡眠不足或纯属误解，我无法让一段 jQuery 代码工作。

所以请大家分享你我唯一的希望：P

我有一个在元素 onClick="" 属性上执行的 jQuery 函数

<div id="next" onClick="choice('next', '<? echo $page; ?>')"></div>

基本上我想要实现的是：让一个元素淡出，然后通过 AJAX 调用 PHP 脚本，获取相关数据，并将该数据发送到前面讨论过的先前隐藏的元素，然后将所述元素淡入焦点。

我遇到的问题是，无论我做什么（使用.queue 或setTimeout）或仅使用jQuery 中的标准“fx”队列，AJAX 数据总是尽快加载，任何延迟尝试都不起作用.

以下是代码，提前感谢您的帮助。

function choice(value, page) {
    var timer;
    $.get("http://<? echo ROOT; ?>includes/forms.php", { choice: value, page: page }, function(data) {
        clearTimeout(timer);

        $("#slideOut-inner").fadeOut(2000).empty();

        timer = setTimeout(show, 2200);

        function show() {
            $("#slideOut-inner").append(data).fadeIn(2000); 
        }
    });
}

【问题讨论】：

标签： php jquery ajax get settimeout

【解决方案1】：

设置$.get的成功回调的延迟outside，否则只有当客户端收到服务器的响应时才会发生：

$("#slideOut-inner").fadeOut(2000, function() {
    $(this).empty();
    $.get("http://<? echo ROOT; ?>includes/forms.php", {
        choice: value,
        page: page
    }, function(data) {
        $("#slideOut-inner").append(data).fadeIn(2000);
    });
});

【讨论】：

非常感谢您的帮助 karim，代码直接运行，很高兴知道 get 回调也以这种方式工作。

【解决方案2】：

尝试将append() 放入fadeOut() 的回调中：

$.get("http://<? echo ROOT; ?>includes/forms.php", { choice: value, page: page }, function(data) {
    $("#slideOut-inner").fadeOut(2000, function() {
        $(this).empty()
            .append(data).fadeIn(2000);
    }).empty();
});

【讨论】：

感谢您的帮助和建议，我已经采用了 karim79 的解决方案，因为您的解决方案确实阻止了初始的 fadeOut 不起作用，我知道这很容易排序。