JavaScript alert 函数执行顺序问题

最新推荐文章于 2023-05-24 20:18:09 发布

天下皆白_唯我独黑

最新推荐文章于 2023-05-24 20:18:09 发布

阅读量1.8k

点赞数 5

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

原文链接：https://www.cnblogs.com/zhenbianshu/p/8686681.html

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

问题

alert()弹窗总数优先于其他的代码执行：代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="abc">
<button id="buttons">按钮</button>

</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
    //点击按钮给abc的input赋值然后弹窗提醒
    $("#buttons").click(function(){
        $("#abc").val('1234567890');
        alert('已经赋值完成');
    })
</script>
</html>

效果如图：

点击按钮先弹出了alert提醒。alert、prompt、confirm 三个函数都类似，接下来我们就用最简单的 alert 来说。

分析

解决这个问题之前先了解一下它是怎么导致的，而要了解它需要从 JavaScript 的线程模型说起。

JavaScript 引擎是单线程运行的，浏览器无论在什么时候都只且只有一个线程在运行 JavaScript 程序，初衷是为了减少 DOM 等共享资源的冲突。可是单线程永远会面临着一个问题，那就是某一段代码阻塞会导致后续所有的任务都延迟。又由于 JavaScript 经常需要操作页面 DOM 和发送 HTTP 请求，这些 I/O 操作耗时一般都比较长，一旦阻塞，就会给用户非常差的使用体验。

于是便有了事件循环（event loop）的产生，JavaScript 将一些异步操作或有I/O 阻塞的操作全都放到一个事件队列，先顺序执行同步 CPU代码，等到 JavaScript 引擎没有同步代码，CPU 空闲下来再读取事件队列的异步事件来依次执行。

这些事件包括：