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

最新推荐文章于 2023-03-04 10:25:39 发布

王跃坤

最新推荐文章于 2023-03-04 10:25:39 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript window

本文链接：https://blog.csdn.net/qq_43652327/article/details/123790994

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

观察下面代码：

<!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的确认键时，渲染进程才可以正常恢复。

王跃坤

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript中alert语句先于上一条语句执行的原因

观察下面代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>王跃坤</title></head><body> <div id="div"></div> <button id="btn">按钮</button> <script>
复制链接

扫一扫