Question

我尝试在setInterval中使用vue-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正在运行其他功能，除了运行setInterval之外，是否有解决方案？

Answer 1

没有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方法调用该类，例如为组件内的传入计时器数组调用

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返回的名称在主线程中触发回调。销毁工作人员也很容易，只需在销毁发生时将其写在钩子上即可。

this.worker.terminate();

The solution is taken from here

vuejs-setInterval无法与vue-worker一起使用

1 个答案: