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中的某处抓取

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

<div>在睡眠方法之前不显示

2 个答案: