日常开发: Web Worker实现秒杀倒计时

Web Worker实现秒杀倒计时

灵魂拷问 -> 为啥要用web worker

因为我们知道 setInterval(() => {}, 1000)代表的意思其实是最快1秒之后能执行, 而如果事件阻塞了的话 就不知道要多久我们才能执行上这个事件了, 因此如果倒计时的话,就会存在这个倒计时的时间被卡住的问题, 如果是秒杀的问题的话~问题有点严重

1. 预备知识介绍

1. 主进程和子进程之间主要通过消息进行通信

• postMessage: 发送消息 -> 可以接受任何参数由父到子 或者 由子到父
• onmessage: 接受postMessage发送的消息对应的回调

简单理解： 通过postMessage 发送消息 类似于 在对方进程中触发 消息事件，然后对方进程接受消息后 触发onmessage回调，做后续处理

2. 动态加载一个web worker代码

一般web worker需要 子进程执行的代码是写在一个单独的js中的，但是我们可以通过blob + URL.createObjectURL来创建一个虚拟的文件，之后在执行web worker

function getWorker(worker, param) {
   
    const code = worker.toString()
    const blob = new Blob([`(${
     code})(${
     JSON.stringify(param)})`])

    return new Worker(URL.createObjectURL(blob))
}

2. 代码撸起

1. 子进程代码

主要流程包括：

1. 监听父消息，开始和结束对应的计时时间
2. 处理倒计时得到的天，时，分，秒的信息
3. 每过一秒发送对应的1中信息给主进程

function getCountDown(param) {
   
    let _timer = null
    let {
    leftTime } = param

    this.onmessage = e =>