Question

这是我的HTML代码：

<div id="loading"><img src="blah blah" alt="Loading..." /></div>

这是我的JS代码：

  $(document).ready(function () {       
            $('#loading').hide();

            $("#submitSessionBtn").click(function () {
                $('#loading').fadeIn();                         
                d3.select("svg").remove();

                $.ajax({
                    type: "GET",
                    url: "Home/GetStuff/",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        console.log("Success!");
                        $('#loading').fadeOut();})

图像基本上是指示加载的微调图像。我想在单击提交按钮后立即显示图像，并在AJAX调用完成后消失。但是，目前它在AJAX调用完成前几秒钟显示，而不是在按下提交按钮之后立即显示。

我做错了什么？

Answer 1

fadeIn函数异步运行，紧接调用之下的代码将在fadeIn操作完成之前继续执行。您想要做的是在完成代码之前不运行代码。为此，fadeIn函数（与show，slideDown等一样）将一个函数作为可选参数，它将在操作完成时执行。将你的ajax调用放在你传递给fadeIn的匿名函数中。它看起来像这样：

$('#loading').fadeIn(function(){
     $.ajax({
                    type: "GET",
                    url: "Home/GetStuff/",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        console.log("Success!");
                        $('#loading').fadeOut();})
});

Answer 2

你确实在正确的位置有$（#loading＆＃39;）标签，因为只有ajax调用完成后才会成功调用。我建议只使用show和hide。我确定FadeIn在序列之间引入了一些渐变色，所以它显示出来之前还没有看到它。至于早期消失，因为一些执行正在发生。根据我的经验，如果进行数据库提取或一些文本文件读取可能是在幕后发生的清理是正常的。

jQuery fadeIn（）不使用AJAX调用

2 个答案: