javascript - 显示/隐藏 jQuery 不适用于 Ajax

Question

您好，我对以下代码有疑问:我无法隐藏加载。我已经尝试过 Mozilla、Chrome，但只有当您将其粘贴到控制台时它才有效。开始加载的html

<div class="loading" style="display: none">

.show 之后

<div class="loading" style="display: block;">

Ajax

$.ajax({
    url: "/uzemnenie",
    cache: false,
    async: true,
    dataType: "html",
    success: function (data) {
        console.log("in ajax ", data.slice( 0, 100 ));
        $('.content').empty().html(data);
    }
});

网页代码

$( document ).ajaxStart(function() {
    $(".content").fadeOut( "slow", function() {
        $(".loading").show().css("display", "block");
    });
});

$( document ).ajaxStop(function() {
    $(".loading").hide();
    $(".content").fadeIn("slow", function() {
        $('#show').fadeIn("slow");
    });
});

仅在以下情况下有效:

$( document ).ajaxStop(function() {
                $(".loading").css("display", "none");
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
            });

奇怪的部分 - 内容也被添加

                $( document ).ajaxStop(function() {
                $(".loading").hide(function(){
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
                });
            });

并且内容显示正确。感谢您的回答。

Answer 1

好了，终于很简单了。 ajax 请求的完成速度比您预期的要快。因此，当请求已完成时，您在 ajaxStart 中隐藏或显示的数据未被完全处理。因此，您在 ajaxStop 函数中所做的事情会被您之前在 ajaxStart 中调用的显示/隐藏函数的结尾搞乱。这就是异步请求的陷阱。最简单的方法是添加一个 setTimeout()。

您可以在此处查看工作解决方案 jsfiddle .

$(document).on({
  ajaxStart: function() { 
                    $(".content").fadeOut("slow");
                    $(".loading").show();
  },
  ajaxStop: function() {
      setTimeout(function() { 
                     $(".loading").fadeOut("slow");
                     $(".content").show("slow");     
                  }, 1500);                                        
  }    
});