时间戳

首页 > 解决方案 > vuejs - setInterval 不适用于 vue-worker

javascript - vuejs - setInterval 不适用于 vue-worker

问题描述

我尝试使用setIntervalinvue-worker但间隔函数没有在工作人员内部运行。

Countdown(){
    this.$worker.run(() => {
    let vm = this;
      vm.worker= setInterval(() => {
        vm.countDown--;

        if (this.countDown === 0) {
          clearInterval(this.worker);
          this.retrieveDrawingResult();
        }
      }, 1000);
  })
    .then(console.log) 
    .catch(console.error)
}

vue-worker除了 running 之外的其他功能正在运行，setInterval有什么解决方案吗？？？

标签： javascriptvue.js

解决方案

有点不同的解决方案，没有 vue-worker，但它有效。

实现步骤如下因为使用vue-cli，需要在webpack下安装worker-loader依赖，单独加载worker.js。

npm install worker-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前面，否则会报错。下面写封装方法。为了适应多定时器的情况，需要构建一个类。

/**
 * worker class
 * export Timer method
 * 
 */
export class workerTimer {
    constructor(){
         
    }
    timeInterval(name,interval,_this){
        console.log(name+'The timer has been set up');   
        this[name] = setInterval(() => {
            _this.postMessage({name:name,message:interval/1000+'Seconds arrived.'})
        },Number(interval))
    }
}

然后使用 worker main 方法调用此类，e 用于组件内的传入计时器数组

import {workerTimer} from './workerTimer'
/**
 *Traversing parameters through traversers
 *new Create new worker classes
 *Call the timer method
 */
self.onmessage = function (e) {
    e.data.map((item) => {
      let workertimer = new workerTimer()
      workertimer.timeInterval(item.name,item.interval,self)
    })
};
Introducing worker into vue components
import Worker from './worker.js'
Write a method in methods, and the name starts at random.
workerInit(){
    this.worker = new Worker();
    this.worker.postMessage(this.workerList);
    this.worker.onmessage = (params) => {
        ...
    }
},
Create a variable in data in the following format:
workerList:[
    {name:'snapInterval',interval:10000},
    {name:'intervalFunc',interval:40}
],
Call the worker method within a hook
mounted(){
    this.workerInit()
}

上面，设置了两个定时器的工作，可以通过worker返回的名字在主线程内触发回调。销毁worker也很容易，只要在destroy发生时写在钩子中即可。

this.worker.terminate();

解决方案取自这里

推荐阅读