Javascript 阻塞'；显示然后隐藏'；使用jquery在n秒之后

乍一看，我试图做一些相当简单的事情，但我做不到。 我有一个按钮和两个隐藏的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>

同样的问题：

$("#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只是我问题的一个例证事实上，我不需要先“编译”show然后隐藏，但#div1更像是按钮按下前后的过渡步骤。我希望你理解我的问题（对不起，我的英语）

谢谢

在jquery动画“完成”之后，必须使用该函数来执行某些操作

$（“#按钮”）。单击（（）=>{
var时限=5000；
$（“#div1”）.show（）.delay（timeLimit）.fadeOut（function（）{
$（“#div2”）.show（）；
});
});

推
第一组
二等兵
谢谢，这很有效。问题是我不能使用回调函数，因为实际的代码非常不同。为了举例说明，我使用了一个函数transition（）来代替按钮单击事件来执行此显示，然后隐藏动画。这个函数被多次调用，这就是为什么我不能使用完整的回调函数。然后你应该发布真正的代码。
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();
});