Worker 是什么？

Web worker就是在web应用程序中使用的worker。这个worker是独立于web主线程的，在后台运行的线程。

Web worker的优点就是可以将工作交给独立的其他线程去做，这样就不会阻塞主线程。

使用Worker

const worker = new Worker("worker.js");

如果你使用的是Typescript你可以创建一个worker.ts

主进程

// 监听子进程发送的消息
worker.onmessage = (e) => console.log(e.data);
// 发送消息到子线程
worker.postMessage('内容');

子进程

// 监听接收主进程信息
self.onmessage = (e) => console.log(e.data);
// 发送信息到主进程
self.postMessage('内容');

销毁它

worker.terminate();

定时器例子

worker.ts

import { workerTimer } from './workertimer'
/**
 *通过遍历器遍历参数
 *new出新的worker类
 *调用定时器方法
 */
const workertimer = new workerTimer()
self.onmessage = function (e) {
    e.data.map((item: any) => {
        if (item.type == 'add') {
            workertimer.timeInterval(item.name, item.interval, self)
        }
        if (item.type == 'close') {
            workertimer.closeInterval(item.name)
        }
    })
};

workertimer.ts

/**
 * worker类
 * export定时器方法
 * 
 */
export class workerTimer {
    InterValID: any = {}
    constructor() {

    }
    timeInterval(name: string, interval: number, _this: any) {
        console.log(name + 'Timer Created')
        let id: any
        id = setInterval(() => {
            _this.postMessage({ name: name, message: interval / 1000 + '秒到了' })
        }, Number(interval))
        this.InterValID[name] = id
        console.log(this.InterValID)
    }
    closeInterval(name: string) {
        console.log(this.InterValID[name])
        clearInterval(this.InterValID[name])
    }
}

App.vue

const worker = new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module'
})

创建定时器请求

worker.postMessage([
         { name: 'loginCall', interval: 50000, type: 'add' },
]);

销毁定时器请求

worker.postMessage([
          { name: 'loginCall', type: 'close' },
]);