javascript线程问题

本文探讨了JavaScript中setTimeout和setInterval的功能及区别,并分析了它们的实际执行情况与预期之间的差异。此外,还深入讨论了JavaScript执行环境的单线程特性以及JS线程与界面渲染线程间的交互方式。

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

一、setTimeout和setInterval的延时问题

1.setTimeout和setInterval的区别

setTimeout(function(){console.log("hello")},100)

100ms或者多于100ms之后输出hello,只执行一次。

setTimeout(function(){console.log("hello")},100)

每隔100m或者多于100ms时间输出hello,一直执行下去除非你主动停止或者浏览器刷新。

2.间隔时间的精确度很小,具体的间隔时间取决于你设置的时间和机器的计算速度,如果机器执行其他任务的时间教程,那么可能要很久才能执行回调函数。

3.while(1){setInterval(function(){console.log("hello")},1000)}

永远都不会输出hello,因为js引擎是单线程的,线程在执行while没空执行其他的函数。

二、界面渲染线程和js渲染线程是互斥的。

1.while(1){var oD = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(oD);}

document.getElementsByTagName("body")[0].appendChild(oD)这句永远都不会执行,因为这个任务要交给渲染线程去做,但是此时js线程正在运行(while)并且js线程和界面渲染线程是互斥的,他们同时只能有一个线程在运行,所以界面渲染线程没机会运行。


### JavaScript 中的线程概念 JavaScript 本质上是一个单线程编程环境,这意味着同一时间只能执行一段代码。然而,在现代 Web 开发中,为了提升用户体验和应用性能,引入了多线程的概念来解决这一局限性。 #### 使用 Web Worker 实现多线程并发处理 Web Worker 是一种 HTML5 特性,能够在网页中创建额外的工作线程,使得 JavaScript 脚本可以并行运行而不阻塞主线程的操作[^1]。这不仅提高了应用程序的整体性能,还确保了用户界面始终保持流畅与响应迅速。 ##### 创建 Web Worker 的基本方法 要启动一个新的工作线程,可以通过 `new Worker()` 构造函数指定一个外部 JS 文件作为该线程的任务逻辑: ```javascript // 主线程中的代码 const myWorker = new Worker('worker.js'); ``` 对于简单的场景也可以采用内联的方式定义 worker: ```javascript let blob = new Blob(["onmessage = function(e) { postMessage('You said: ' + e.data); }"],{type:"text/javascript"}); let workerURL = URL.createObjectURL(blob); let inlineWorker = new Worker(workerURL); inlineWorker.onmessage = function(e){ console.log(e.data); }; inlineWorker.postMessage("Hello"); ``` ##### 工作原理及注意事项 - **独立性**: 每个工作线程都在自己的上下文中运行,它们不能直接操作页面上的 DOM 或者访问其他线程的数据结构;因此需要通过特定的消息机制来进行数据交换[^2]。 - **消息传递**: 主线程与子线程之间的交互依赖于发送(`postMessage`) 和接收 (`onmessage` event handler) 数据包的形式完成通讯过程。这种方式保证了不同进程间的安全隔离以及高效的协作模式。 - **终止条件**: 当不再需要某个 worker 时应该调用其 terminate 方法释放资源以免造成内存泄漏等问题。 ```javascript myWorker.terminate(); ``` #### 示例:计算密集型任务分配给 Web Worker 假设有一个耗时较长的大数相乘运算任务适合交给后台去完成,则可以在 worker.js 文件里编写如下代码片段用于处理此类请求: ```javascript self.onmessage = function(event) { let result = multiplyLargeNumbers(event.data.numbers); self.postMessage({result}); } function multiplyLargeNumbers(numbersArray) { // 假设这里实现了大整数乘法算法... } ``` 而在前端页面上则只需要简单地监听返回的结果即可更新UI显示最终答案。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值