用jQuery在n秒后阻止“显示然后隐藏”

Question

乍一看，我试图做一些相当简单的事情，但我做不到。我有一个按钮和两个隐藏的div。按下按钮时，我希望第一个div显示，n秒后隐藏，然后第二个div显示。

HTML：

<button id="button">
  push
</button>
<div id="div1" style="display:none">
  firstDiv
</div>
<div id="div2" style="display:none">
  secondDiv
</div>

包含JS的完整代码如下所示：https://jsfiddle.net/439xbfe5/

我已经在这里检查了答案：jQuery显示5秒钟，然后隐藏

这个代码的问题是#div2在#div1消失之前出现：

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show().delay(timeLimit).fadeOut();
  $("#div2").show();
  
});

同样的问题：

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show();
  setTimeout(function() { $("#div1").hide(); }, timeLimit );
  $("#div2").show();
  
});

我还尝试创建一个阻塞睡眠功能，比如：

function sleep(ms){
  var start = new Date().getTime();
  while(true){ 
    if(new Date().getTime()-start>ms){
        return; 
     }
  }
}

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show();
  sleep(timeLimit);
  $("#div2").show();
});

但这根本不起作用。

此外，显示#div2只是我问题的一个例证。实际上，我不需要编译显示然后隐藏，但是#div1更像是按钮按下前后的过渡步骤。我希望你理解我的问题（对不起我的英语）。

谢谢！

Answer 1

您必须使用complete回调函数在jquery动画“完成”后执行某些操作。

$("#button").click(()=>{

  var timeLimit = 5000;
  $("#div1").show().delay(timeLimit).fadeOut(function(){
    $("#div2").show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">
  push
</button>
<div id="div1" style="display:none">
  firstDiv
</div>
<div id="div2" style="display:none">
  secondDiv
</div>