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

嗨,我有以下代码的问题：
我无法隐藏装载.
我已经尝试过Mozilla,Chrome,只有在将其粘贴到控制台时才有效.
开始加载的 Html

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

之后.show

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

阿贾克斯

$.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");
                });
                });
            });

内容显示正确.
谢谢你的回答.

解决方法

好的,最后它非常简单. ajax请求比您预期的要快.因此,在请求完成时,您在ajaxStart中隐藏或显示的数据未被完全处理.所以你在ajaxStop函数中所做的事情正在被你之前在ajaxStart中调用的show / hide函数的结尾搞乱.这是异步请求的陷阱.最简单的方法是添加一个setTimeout().

你可以在这里看到工作解决方案jsfiddle.

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