首先，介绍worker

如果你想知道为什么settimeout和setinterval如果倒计时不准确，你可以先通过百度股份有限公司了解。event loop 最好再读一遍。

我的环境：

 "vue": "^2.6.11",
 "@vue/cli-plugin-babel": "~5.0.4",
 "@vue/cli-service": "~5.0.4",

引入worker我们需要以下配置

yarn add worker-loader -D

我的版本是"worker-loader": “^3.0.8”

vue.config.js

  // 解决打包时间错误
  parallel: false,
  chainWebpack: (config) => {
    // set worker-loader
    config.module
      .rule(worker)
      .test(/.worker.js$/)
      .use(worker-loader)
      .loader(worker-loader)
      .options({
        inline: fallback,
        filename: workerName.[hash].worker.js,
      })
      .end();
    // 解决：worker 热更新问题
    config.module.rule(js).exclude.add(/.worker.js$/);
    // 删除splitChunks 请勿删除
    config.optimization.delete(splitChunks);

    config.plugin(define).tap((args) => {
      const [define] = args;

      Object.assign(define, {
        IS_APPLET: JSON.stringify(true),
        UNIQUE_MARK: JSON.stringify(uniqueMark),
      });
      return args;
    });
  },

好了，介绍已经完成了。第二，我们需要建立一个新的。worker首先写入文件。onmessage测试

使用worker

* .worker.js**

// 创建数据存储。obj
const countObj = {
  timer: null,
  examTime: -1,
  stopTimeStatus: false,
  setTimer(data) {
    this.timer = data;
  },
  setExamTime(data) {
    this.examTime = data;
  },
  setStopTimeStatus(data) {
    this.stopTimeStatus = data;
  },
};

function countDown(time) {
  countObj.examTime = time;
  if (countObj.timer) {
    return;
  }
  // 倒计时结束后timeEnd的消息
  if (time === 0) {
    postMessage([timeEnd, 0]);
    return;
  }
  countObj.timer = setTimeout(() => {
    countObj.timer = null;
    countObj.examTime--;
    // 传递给vue文件倒计时后的时间
    postMessage([countDown, countObj.examTime]);
    countDown(countObj.examTime);
  }, 1000);
}

onmessage = function (e) {
  const {
    data: { type, data },
  } = e;
  console.log(收到消息, e);
  countDown(data);
};

为了便于操作，我写了一个特殊的管理worker交互的js文件

* .js**

import Worker from ./***.worker.js;

const worker = new Worker();

// 初始化
export function init() {
  worker.postMessage({
    type: init,
    data: test,
  });
}

// 获取worker
export function getWorker () {
  return worker;
}

//...还有一些方法将不详细显示。, 这都是关于时间的运作。

如在上面的代码块中，postMessage是向worker线程传递信息，然后可以worker.js中的onmessage获取到。

%重点%

worker介绍方式

import Worker from ./***.worker;

const worker = new Worker();

在我们的配置中worker-loader然后可以用这种方式构造。worker

在vue在文件中使用worker接收消息处理逻辑

* .vue**

// 介绍刚刚写的简介。worker的js文件
import * as countDownInstance from ../utils/***.js;

// 创建worker在最初的时间里就过去了
countDownInstance.startCount(this.time);
const worker = countDownInstance.getWorker();
worker.onmessage = (event) => {
  // 做你想做的事  
  const { data } = event;
  const [type, time] = data;
    if (type === countDown) {
      this.time= time;
    }
};

最后，我整理了相互调用的逻辑图，以便于理解。