从setInterval看js的单线程执行

最新推荐文章于 2023-11-24 22:01:09 发布
最新推荐文章于 2023-11-24 22:01:09 发布
阅读量418 收藏
点赞数
分类专栏： 各种基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>" 
最低0.47元/天 解锁文章
JavaScript执行机制、单线程与并发
yangyang的专栏
04-23 1385
参考文章：
理解javascript定时器中的单线程
10-22
JavaScript引擎是基于事件驱动单线程执行的。这意味着，JavaScript引擎一直等待着任务队列中任务的到来，然后进行处理。无论是何时，浏览器中只有一个JS线程在运行JS程序。这一点可以通过代码测试验证。例如，如果在...
javascript 的线程问题，收藏
Now . Or Never ``
07-27 7495
<br /><br />JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如<br />setTimeout( function(){ alert(’你好!’); } , 0);<br />setInterval( callbackFunction , 100);<br />认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确
从setTimeout/setInterval看JS线程
程序员观察
04-23 540
（点击上方公众号，可快速关注）作者：PalmerYepalmer.arkstack.cn/2017/12/从setTimeout-setInterval看JS线程/最近项...
javascript线程解释（setTimeout,setInterval你不知道的事）---转载
andywang821017的博客
01-26 135
　　在工作中，可能我们经常遇到在有很多 setInterval 的页面, 再手动触发 setTimeout 的时候经常失败, 尤其是 jquery做动画的时候,一些渐入溅出的东西,很多东西都不被触发……，导致出现这些问题，到底是什么回事呢 　　JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行...
setInterval函数线程问题
aaa1117a8w5s6d的专栏
08-09 1519
setInterval是JAVASCRIPT的一个函数，一定时间内触发一次动作；比如autoplayerid = setInterval("autoOpenInfowindow()", 5000); 但是每次打开一次就一定要关闭一次调用 clearInterval（autoplayerid）； 之前我把setInterval放到一个函数里面，但是会重复调用这个函数，问题就出现了 我调用这个
js基于setTimeout与setInterval实现多线程
10-22
在JavaScript编程中，"多线程"这一概念实际上是基于事件驱动和异步执行的单线程模型来模拟实现的。JavaScript的单线程特性意味着在浏览器的主线程中，任何时候只有一个任务可以被执行。然而，为了实现异步操作，比如...
JavaScript单线程和任务队列原理解析
10-15
JavaScript是一种基于单线程执行模型的脚本语言，这一特性源于其主要应用于浏览器环境，用于与用户交互和处理DOM操作。由于多线程操作DOM可能导致复杂的同步问题，JavaScript被设计为单线程，以简化编程逻辑。然而，...
JavaScript单线程还是多线程
03-29
它的核心特性之一是单线程（Single-Threaded），这也是JavaScript设计时的重要考量，以确保代码执行的简单性和一致性。本文将深入探讨JavaScript的单线程模型以及与之相关的并发机制。 在计算机编程中，线程是程序...
setTimeout和setInterval和单线程
weixin_30915951的博客
11-22 145
我们知道，js是单线程执行的(单线程j就是说在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行)。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。 而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你...
聊聊setTimeout和setInterval线程
weixin_30867015的博客
07-02 254
在聊setTimeout和setInterval这两个事件的前，先聊另外一个与之密切关联的知识点，那就是线程（thread）。而线程有常常跟另外一个词语--“进程”一起出现。那么何为线程？何为线程呢？关于线程，维基百科上是这么解释的：Thread (computing), a sequence of instructions that may execute in parallel with ot...
JS setInterval
twxwjh的博客
06-20 436
JS window.setInterval window.setInterval(func, time); func: 执行的函数, String, 如"hello()" time: 执行间隔时间, 1000=1秒, 如1000*10 效果: 不阻塞反复每间隔time秒执行func函数 实例 function hello() { console.log("hello"); } window.setInterval("hello()", 1000);
javascript线程解释（setTimeout,setInterval你不知道的事）
a4565252的专栏
10-07 882
john resig写的一篇文章：  原文地址：http://ejohn.org/blog/how-javascript-timers-work/  作为入门者来说，了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观，而这是因为它们都处在一个单一线程中。让我们先来看一看三个用来创建以及操作timer的函数。 var id = setTimeout
#Js篇：单线程模式&&同步任务&&异步任务&&任务队列&&事件循环&&setTimeout()&& setInterval()
最新发布
...
11-24 371
定义：是一种程序结构，用于处理任务队列中的任务。js运行时（浏览器）中存在一个主线程，事件循环负责不断的检查任务队列，如果任务队列中有任务，就将任务取出并执行。2、 常见的浏览器无响应—假死，往往就是因为某一段js代码长时间运行—比如死循环，导致整个页面卡在这个地方，其他任务无法执行。1、 只有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。定义：被引擎放在一边，不进入主线程、而进入任务队列的任务。定义：没有被引擎难挂起、在主线程上执行的任务。定义：用来存放异步任务的队列。
用故事解析setTimeout和setInterval(内含js单线程和任务队列)
aowumei6046的博客
09-03 180
用故事解析setTimeout和setInterval(内含js单线程和任务队列) 区别： setTimeout(fn,t)： 延迟调用，超过了时间就调用回调函数，返回一个id，使用clearTimeout(id)取消执行。 注意：取消了里面的回调函数就不执行了哦，...
php settimeout异步,js基于setTimeout与setInterval实现多线程
weixin_34620163的博客
03-13 113
本文实例讲述了js基于setTimeout与setInterval实现多线程的方法。分享给大家供大家参考，具体如下：javascript无法实现线程阻塞(sleep)，原因是因为sleep涉及系统调用。js出于安全考虑是不允许系统调用的。如果一定要实现语句继续执行就只能用while(1)空转的方法消耗CPU，判断到了时间就break。不过这个方法也不是真正sleep。只执行一次的定时器//定时器使...
浅谈js单线程
zhoujie_zhoujie的博客
11-03 510
一. 浏览器内核最开始想先说说浏览器内核，起初，浏览器内核指的是js引擎和渲染引擎，后来，js引擎越来越独立，浏览器内核逐渐就单指渲染引擎（也称排版引擎）。浏览器都由哪些部分组成1.用户界面 2.浏览器引擎（the browser engine）— 用来查询及操作渲染引擎的接口； 3.渲染引擎（the rendering engine）— 显示请求的内容； 4.网络 — 用来完成网络调用
js基础之setTimeout与setInterval原理分析
夕山雨的博客
07-06 5894
基本原理 setTimeout(func, delay, args)：设置超时调用，经过delay时间后，将func函数加入到执行队列中准备调用。如果队列为空，立即执行该函数，否则等待线程空闲再执行。 setInterval(func, interval, args)：设置 ...
js setInterval 和setTimeout 实现多线程？
yanhui1212的博客
05-11 568
JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.      setInterval 和 setTimeout ，都涉及到时间计数器，也就是都涉及到一个类似与MFC定时器。JS引擎本身就只能单线程运行，因此定时器需要由其他的外部线程来启动。所以对JS引擎而言，定时器线程可以被视为异步线程。但当定时器时间到达后，所触发的事件则必须在任...
理解JavaScript单线程中的异步处理
"单线程JavaScript实现异步过程详解，通过示例代码深入解析JavaScript的异步机制，帮助读者理解同步与异步的区别，并探讨JavaScript单线程特性下的异步处理方式。" JavaScript中的异步处理是编程中的一个重要概念，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值