vue2中使用web worker启动定时器

1、添加worker-loader

npm install worker-loader --save

2、修改vue.config.js

新增以下配置

 config.module.rule('workers').test(/\.worker\.js$/).use('worker-loader').loader('worker-loader').options({inline: 'fallback'  // 尝试内联，失败则回退到默认行为})

3、创建timer.worker.js

self.timers = {}self.onmessage = function(event) {const { action, id, interval } = event.dataswitch (action) {case 'startTimer':startTimer(id, interval)breakcase 'stopTimer':stopTimer(id)breakcase 'stopAllTimers':stopAllTimers()break}
}function startTimer(id, interval) {if (!self.timers[id]) {self.timers[id] = setInterval(() => {self.postMessage({ id })}, interval)}
}function stopTimer(id) {if (self.timers[id]) {clearInterval(self.timers[id])delete self.timers[id]}
}function stopAllTimers() {Object.keys(self.timers).forEach(id => {clearInterval(self.timers[id])})self.timers = {}
}

4、创建TimerWorker.js

import Worker from './timer.worker.js'export default class TimerWorker {worker;timers;constructor() {this.start()}startTimer(id, interval, fun) {if (this.worker && !this.timers[id]) {this.timers[id] = funthis.worker.postMessage({ action: 'startTimer', id, interval })}return this}stopTimer(id) {if (this.worker && this.timers[id]) {this.worker.postMessage({ action: 'stopTimer', id })delete this.timers[id]}return this}stopAllTimers() {if (this.worker) {this.worker.postMessage({ action: 'stopAllTimers' })this.timers = {}}return this}start() {if (!this.worker) {const worker = new Worker()worker.onmessage = (event) => {this.timers[event.data.id]()}this.worker = workerthis.timers = {}}return this}terminate() {if (this.worker) {this.stopAllTimers()this.worker.terminate()this.worker = undefinedthis.timers = undefined}return this}
}

5、使用TimerWorker启动定时任务

import TimerWorker from './TimerWorker'export default {...created() {this._timerWorker = new TimeWorker()this.startTimer()},beforeDestroy() {this._timerWorker.terminate()},methods: {startTimer() {this._timeWorker.startTimer('test', 100, () => {console.log(new Date().getTime())})}}...
}