【Worker】js使用多线程实现倒计时

tremaintime.js
主要用于计算时间，放到assets目录，因为Worker需要请求获取这个文件的，要同源

onmessage = function ({ data }) {
  setInterval(() => {
    postMessage(initremainTime(data)) // 发送信息到主线程
  }, 1000)
}

function initremainTime(endTime) {//倒计时
  var data = new Date();
  var nowTime = data.getTime();
  var chaTime = endTime - nowTime;
  //倒计时的时间
  if (chaTime >= 0) {
    var d = parseInt('' + chaTime / 1000 / 60 / 60 / 24);
    var h = parseInt('' + chaTime / 1000 / 60 / 60 % 24);
    var m = parseInt('' + chaTime / 1000 / 60 % 60);
    var s = parseInt('' + chaTime / 1000 % 60);
  }
  let hh, mm, ss;

  if (h < 10) {
    hh = '0' + h;
  } else {
    hh = h
  }

  if (m < 10) {
    mm = '0' + m;
  } else {
    mm = m
  }
  if (s < 10) {
    ss = '0' + s;
  } else {
    ss = s
  }
  return {
    hh,
    mm,
    ss
  }
}

page.vue
页面文件，创建线程，接受返回值

// 多线程计算时间，兼容性未知
const work = new Worker('assets/js/tremaintime.js')
work.postMessage(endTime) // 发送结束时间给线程，就是tremaintime.js文件，通过data接收
work.onmessage = (message) => {
  const { hh, mm, ss } = message.data
  this.countdown = hh + ':' + mm + ':' + ss // 渲染到html即可
  if (+hh == 0 && +mm == 0 && +ss == 0) {
    // 倒计时结束，关闭线程
    work.terminate();
  }
}