定时器为什么不可靠
在事件循环执行机制中,异步事件会把回调函数放入消息队列中,主线程的宏任务执行完毕后,依次执行消息队列中的微任务,等微任务执行完了再循环回来执行宏任务。由于消息队列中存在大量的任务,其他任务的执行时间就会造成定时器回调函数的延迟,如果不处理,就会一直叠加延迟,当运行时间久了之后,相差就会很大。
因此定时器是不能完全保证的。
怎么解决?
web Worker
浏览器中 JS 都是单线程工作,当在前端执行一些耗时的工作时,页面后续渲染等步骤都会等待,就会导致一些页面的卡顿假死,影响用户体验。
webworker 的出现,就是给js创建多线程的环境。主线程创建worker线程,可以把计算密集型或高延迟的任务交给worker线程执行,主线程运行的同时worker线程也在运行,相互不干扰,主线程负责UI交互,这样主线程就不会被阻塞。
代码实现
根据自身逻辑在onmessage中处理对应业务即可
index.js
// 创建一个Worker实例
this.worker = new Worker("test.js");
// 初始化,否则不会执行
this.worker.postMessage("init");
// 监听Worker收到的消息
this.worker.onmessage = e => {
this.timeNum = e.data;
console.log(e.data);
// 当倒计时为1时
if (this.timeNum == 1) {
/**
* 需要处理的逻辑
*/
}
};
worker.js
this.addEventListener('message', function (e) {
// e.data = 'AAAAAAAAA'
this.postMessage('worker.js :'+e.data);
}, false)
// 监听错误
this.addEventListener('error', function (e) {
console.error("收到消息",e)
}, false);