1

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

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

回调淡出效果： 

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

加载页面函数：

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);
                        }
                    }

我究竟做错了什么？为什么淡出不等待 500 毫秒而不是运行 loadpage 函数。为什么Ajax函数会直接触发？

4

3 回答 3

1

尝试：

$("#core").fadeOut(500, function(){
   processingPages.loadPage(clickedButton);
});
于 2012-07-02T19:28:36.560 回答
1 
$("#core").fadeOut(500, function() {
    processingPages.loadPage(clickedButton));
});

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

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

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

alert //reference to alert function
alert('hello'); //invocation of alert function
于 2012-07-02T19:28:36.600 回答
0

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

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";});
}
于 2012-07-02T19:55:28.950 回答