javascript - <Div> 在 sleep 方法之前不显示

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);}
}

我从 stackoverflow 中的某个地方抓取的 sleep 函数

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

我在这里想要的是，当我单击按钮时，div 显示，然后它会等待 3 秒，然后保留代码，因为它会发布数据然后返回到同一页面，因为我在这里得到的是 sleep 3几秒钟后，显示 div，然后它几乎立即刷新我的页面，没有时间按预期查看消息。

Answer 1

您将浏览器线程阻塞了 3 秒，因此在完成之前它无法绘制更新。

简单的规则是:永远不要阻塞浏览器线程。

任何时候你发现自己遇到这样的事情:

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

您真正想要的是:

doSomething();
setTimeout(doSomethingElse, 3000);

也就是说，安排代码在 3 秒后运行，而不是尝试阻止一切 3 秒。阻塞是不好的。