活动页倒计时-worker-loader

一、无阻塞问题的方案：

npm install worker-loader --save-dev

webpack

{
   test: /\.worker\.(c|m)?js$/i,
   loader: "worker-loader",
   options: {
     esModule: false,
   },
 },

App.vue

<template>
  <div id="button">
    {{remainTimestamp}}
  </div>
</template>
<script>
import Worker from "./my.worker.js";

export default {
  name: "countdown",
  props: {
    timestamp: {
      type: Number,
      default: 500000
    }
  },
  data() {
    return {
      remainTimestamp: 0
    };
  },
  beforeDestroy () {
    this.worker = null;
  },
  methods: {
    setTimer(val) {
      this.worker = new Worker();
      this.worker.postMessage({
        value: val
      });
      const that = this;
      this.worker.onmessage = function(e) {
        that.remainTimestamp = e.data.value;
      }
    }
  },
  mounted(){
     this.worker = null;
      this.setTimer(50000);
  }
};
</script>

my.worker.js

self.onmessage = function(e) {
  let time = e.data.value;
  const timer = setInterval(() => {
    time -= 71;
    if(time > 0) {
      self.postMessage({
        value: time
      });
    } else {
      clearInterval(timer);
      self.postMessage({
        value: 0
      });
      self.close();
    }
  }, 71)
};

方案二：clearInterval

// 倒计时逻辑处理
    getCountDown() {
      clearInterval(clearTime);
      clearTime = setInterval(() => {
        if (this.leftTime <= 0) {
          let initCount = {
            day: "00",
            hour: "00",
            minute: "00",
            second: "00"
          };
          this.countDown = initCount;
          this.leftTime = 0;
        } else {
          let { day, hour, minute, second } = showtime(this.leftTime);
          // 一位数补0
          day = day < 10 ? "0" + day : "" + day;
          hour = hour < 10 ? "0" + hour : "" + hour;
          minute = minute < 10 ? "0" + minute : "" + minute;
          second = second < 10 ? "0" + second : "" + second;

          let initCount = {
            day,
            hour,
            minute,
            second
          };
          this.countDown = initCount;
          this.leftTime = this.leftTime - 1000;
        }
      }, 1000);
    },

切换窗口重新请求后端接口校验时间

 // 游览器窗口切换
    checkViChange() {
      if (!document.hidden) {
        this.getTime();
        this.getCountDown(); // 定时器
      }
    },

// 获取倒计时时间
    async getTime() {
      try {
        const res = await this.$api.getDoubleElevenTime();
        if (res.data && res.code === 200) {
          this.leftTime = res.data;
        }
      } catch (error) {
        console.log("error", error);
      }
    },