从setInterval看js的单线程执行_js setinterval是单独启动线程执行的吗-优快云博客

本文链接：https://blog.youkuaiyun.com/fallfeather/article/details/115489820

本文通过一个简单的setInterval例子探讨JavaScript的单线程特性，解释为何JS采用单线程设计，以及如何通过Web Worker实现多线程计算。浏览器中的JS引擎、界面渲染和事件响应线程之间的协同工作确保了线程安全，避免了复杂的同步问题。此外，AJAX也被用于实现多线程效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的例子

在学习js的过程中发现了一个有意思的事情

下面的代码可以每隔三秒在屏幕上插入当前时间

setInterval(function () {
    document.write("<h1>" + Date() + "</h1>");
}, 3000);

在最开始界面如下

过了几秒钟，界面如下

可见setInterval将我之前的界面进行覆盖了，然后之后执行的时候也并没有覆盖原来的位置，而是在下面继续打印后三秒的时间

经过查询资料，发现js是单线程，当界面载入的时候会先按顺序执行js代码，之后会按照先后顺序执行setInterval和setTimeout的代码，在我的代码中体现为两个过程，首先是顺序执行我除了setInterval与setTimeout类似延迟执行的函数后，执行了setInterval，这其实是两个过程，所以就有了两种页面加载的样式了。

在我将代码改成如下时

setInterval(function () {
    document.write("<h1>" + Date() + "</h1>");
}, 3000);

setTimeout(function () {
    document.write(Date());
}, 4000);

显示如下，可见延迟执行的js函数为同一个过程。

JS为什么用单线程

浏览器中有三个常驻的线程，分别是JS引擎，界面渲染，事件响应。由于这三个线程同时要访问DOM树，所以为了线程安全，浏览器内部需要做互斥：当JS引擎在执行代码的时候，界面渲染和事件响应两个线程是被暂停的。所以当JS出现死循环，浏览器无法响应点击，也无法更新界面。现在的浏览器的JS引擎都是单线程的，尽管多线程功能强大，但是线程同步比较复杂，并且危险，稍有不慎就会崩溃死锁。单线程的好处不必考虑线程同步这样的复杂问题，简单而安全。