在Vue-Cli环境下使用worker运行间隔定时器今天在codereview的时候，发现之前遗留的一个问题：在一个视频播放页面，有一个40ms的间隔一直在运行障碍导致视频延迟逐渐增加，于是写了一个worker把定时器拉出来单独运行。实施步骤如下。因为使用了vue-cli，webpack下必须安装worker-loader依赖才能单独加载worker。jsnpminstallworker-loader--save-dev更改vue.config.js文件的配置项configureWebpack:{module:{rules:[{test:/\.worker\.js$/,loader:'worker-loader',options:{inline:true,fallback:false,name:'[name]:[hash:8].js'}}]},}注意worker-loader配置项必须写在js-loader之前，否则会报错。封装方法写在下面。为了适应多个定时器的情况，需要建一个class/***workerclass*exporttimermethod**/exportclassworkerTimer{constructor(){}timeInterval(name,interval,_this){console.log(name+'定时器建立');this[name]=setInterval(()=>{_this.postMessage({name:name,message:interval/1000+'secondsup'})},Number(interval))}}然后使用workermain方法调用这个类，e是组件import{workerTimer}from'./workerTimer'/**中导入的timer数组*通过遍历器*new遍历参数生成一个新的worker类*调用timer方法*/self.onmessage=function(e){e.data.map((item)=>{letworkertimer=newworkerTimer()workertimer.timeInterval(item.name,item.interval,self)})};在vue组件中引入workerimportWorkerfrom'./worker.js'，并在methods中写一个方法，随便起个名字workerInit(){this.worker=newWorker();this.worker.postMessage(this.workerList);this.worker.onmessage=(params)=>{...}}，在data中创建一个变量，格式如下：workerList:[{name:'snapInterval',interval:10000},{name:'intervalFunc',interval:40}],在某个hook调用上面的worker方法mounted(){this.workerInit()}，两个定时器的工作就建立起来了。在主线程中，可以通过worker返回的name来判断触发回调销毁worker。这也很简单。只需编写this.worker.terminate();在销毁钩
