在 Jquery 中延迟 Ajax答案

【问题标题】：delay Ajax in Jquery在 Jquery 中延迟 Ajax
【发布时间】：2012-07-02 19:27:12
【问题描述】：

我有一个简单的页面，通过单击按钮，新数据通过 ajax 函数加载到 DIV。当用户单击另一个按钮时，该 DIV 淡出，加载数据并且 DIV 再次淡入。问题是当用户单击按钮 DIV 淡出但已加载新数据时。

我尝试在 FadeOut 函数中使用回调来防止在淡出之前加载新数据，但这没有帮助。我的代码如下：

回调淡出效果：

$("#core").fadeOut(500, processingPages.loadPage(clickedButton));

loadPage函数：

loadPage: function(bottomMenu) { 
            $("#indicator").show();
            $.ajax({url: bottomMenu.attr('href'),
            dataType: 'html',
            timeout: 5000, // 5 seconds
            success: function(html) {
            $("#indicator").hide();
            $("#core").html(html).fadeIn(500);
                        }
                    }

我做错了什么？为什么 Fade out 不等待 500ms 而不是运行 loadpage 函数。为什么Ajax函数会直接触发？

【问题讨论】：

标签： jquery ajax delay wait fadeout

【解决方案1】：

尝试：

$("#core").fadeOut(500, function(){
   processingPages.loadPage(clickedButton);
});

【讨论】：

【解决方案2】：

$("#core").fadeOut(500, function() {
    processingPages.loadPage(clickedButton));
});

这是一个常见的错误。你的意思是传递一个函数，但实际上传递的是函数的返回值，因为你是立即执行而不是请求它稍后执行。

在我的情况下，我传递了一个匿名函数（不是函数的返回值），它在执行时（即淡出后）执行您的代码。

这是函数引用和函数调用的区别。

alert //reference to alert function
alert('hello'); //invocation of alert function

【讨论】：

【解决方案3】：

使用承诺。让事情变得非常简单。

var fadingOut = $("#core").fadeOut(500).promise()

fadingOut.done(function() {
    processingPages.loadPage(clickedButton)
});

虽然这是一个简单的例子，但养成这个习惯，一切都会变得容易得多。

你甚至可以在 ajax 中使用 Promise，jquery ajax 调用默认返回 Promise。您的 loadPage 函数可能如下所示：

loadPage: function(bottomMenu) { 
    $("#indicator").show();
    var gettingData = $.ajax({url: bottomMenu.attr('href'),
      dataType: 'html',
      timeout: 5000
    });

    gettingData.done(function(html) {
      $("#indicator").hide();
      $("#core").html(html).fadeIn(500);
    });

    gettingData.fail(function() {alert("There was a problem loading your data";});
}

【讨论】：