worker的用法-解决定时器不准的问题

Worker的概念：

Worker 主要作用是开辟一条独立的线程，浏览器中的JS执行机制是单线程 - 详情请看上篇文章，往往在执行到一些耗时且和当下并不相关的任务时就体现到了 Worker 的重要性，当然像定时器 setTimeout 之类延迟函数也可以使用，不过这些是建立在单线程的基础上触发，深层意义上并不能算是多线程，所谓的多线程就是新建立一条隧道并且不受主线程上下文影响，并且两者之间可以进行通讯。

Worker的使用：

新建worker.ts文件

// worker.js

let timer : any = null;

// 此处self完整为window.self，代表worker子进程的全局对象
// onmessage：此处用于接受主进程传递的消息
// postMessage：发送消息到主进程
self.onmessage = function (event) {
  if (event.data === 'start') {
    timer = setInterval(() => {
      self.postMessage('tick');
    }, 5000);
  } else if (event.data === 'stop') {
    clearInterval(timer);
  }
};

在需要用到的页面进行引入。

const worker = new Worker(new URL('@/assets/worker/worker.ts', import.meta.url))
onMounted(async () => {
  // 发送消息：start
  worker.postMessage('start');
  // 接受到子进程发送过来的消息，进行操作
  worker.onmessage = (event) => {
    if (event.data === 'tick') {
      searchNum()
    }
  };
  searchNum()
});

worker.terminate()      // 销毁worker

此处的用处是：当前页面有一个定时器任务，当浏览器切换离开当前页面时，定时器任务就会不准（比如10s1次，5分钟应该走30次，当离开页面是可能会走15次左右，也可能更少或更多）。此处的worker就是为了解决上述定时器的问题。