<Div>未在睡眠方法之前显示

Question

我有一个

   <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
                <font size="6">
                    <p>Message Text</p>
                </font>
        </div>
    </div>

我试着让这条消息在点击按钮后出现，然后睡觉2-3秒，然后继续执行代码，但我得到的是睡眠2-3秒，然后显示消息，我的页面在设置好后重新加载。

在我的按钮单击事件：

$("#ButtonID").click()
{
 if (validate stuff) {//code here}
 else {modal.style.display = "block"; sleep(3);}
}

我从堆叠溢出的某个地方抓到的睡眠功能

function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

这里我想要的是，当我点击div显示的按钮，然后等待3秒，它就会保存代码，就像它做的那样，然后返回到同一个页面，因为我在这里得到的是睡眠3秒，显示div，然后它几乎立即刷新我的页面，这样就没有时间看到预期的消息了。

Answer 1

您阻塞浏览器线程3秒，所以它无法绘制更新，直到完成。

简单的规则是：从不阻止浏览器线程。

每当你发现自己有这样的事情时：

doSomething();
wait3Seconds();
doSomethingElse();

你真正想要的是：

doSomething();
setTimeout(doSomethingElse, 3000);

也就是说，将代码排在3秒后运行，而不是试图将所有内容阻塞3秒。阻塞是不好的。

Answer 2

应该使用setTimeout来完成

$("#ButtonID").click(function()
{
     setTimeout(function() {
       if (validate stuff) {//code here}
       else {modal.style.display = "block";}
     }, 3000);
});