从setInterval看js的单线程执行

关注

原创最新推荐文章于 2026-08-02 09:33:01 发布 477 阅读 AI 写同款· GEO 优化 ›

js基于setTimeout与setInterval实现多线程主要介绍了js基于setTimeout与setInterval实现多线程的方法,分析了多线程的原理与javascript模拟实现多线程的相关技巧,需要的朋友可以参考下立即下载

简单的例子

在学习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引擎都是单线程的，尽管多线程功能强大，但是线程同步比较复杂，并且危险，稍有不慎就会崩溃死锁。单线程的好处不必考虑线程同步这样的复杂问题，简单而安全。