JavaScript中alert语句先于上一条语句执行的原因

最新推荐文章于 2026-04-22 07:08:26 发布

原创最新推荐文章于 2026-04-22 07:08:26 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #window

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文通过一个具体的HTML示例，详细解释了为什么在JavaScript中使用alert会阻止页面的进一步更新，直到用户关闭弹窗。文章揭示了alert函数如何影响DOM的渲染流程，并提供了清晰的步骤说明。

观察下面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>王跃坤</title>
</head>
<body>
    <div id="div"></div>
    <button id="btn">按钮</button>
    <script>
        var div=document.getElementById("div");
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            div.innerHTML="<h1>点击alert弹框确认键之后才出现</h1>";
            alert("注意看网页，innerHTML内容并没有显示");
        }
    </script>
</body>
</html>

逻辑上来讲，应该是点击按钮后，页面出现大字标题，随后出现弹框，

但是，事实上，我们点击按钮后，直接弹出了弹出框，网页上并没有出现大字标题

在这里插入图片描述

我们理一下我们点击按钮后程序的运行过程

用户点击按钮，激发onclick函数
程序在HTML的div中加入h1标题文字
window对象调用alert函数
window对象渲染新的HTML文件

也就是说：
在程序执行的过程中，alert函数直属于window，所以alert函数执行时，阻塞了新的HTML文件的渲染过程，表现在我们的视觉上，感觉上一条语句没有执行，本质是上一条语句已经执行，并且成功嵌入HTML文件，只不过被alert函数阻塞了渲染过程。当我们点击alert的确认键时，渲染进程才可以正常恢复。