JS 代码非顺序执行语句 单步运行正常，直接跑出问题

Question

想实现 弹框3s后自动隐藏，我设定了如下代码：

document.getElementById("alertMessageSel").style.display = "block";

document.getElementById("alertMessage").innerHTML = "两次输入手机号不一致！";

var t = Date.now();           

var t1 = Date.now() + 100;

while(t1 - t <= 3000) {

    t1 = Date.now();

};

document.getElementById("alertMessage").innerHTML = "";

document.getElementById("alertMessageSel").style.display = "none";

单步调试没有问题，会顺序执行，我指的是打断点，效果和我想象一样，但是不打断点直接运行就不会出现这个效果。
我想到了js在运行过程中运行应该有自己的执行方式。

2.想知道其中的运行机制，想了解如何实现，达到我预期的效果。