一、无阻塞问题的方案:
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);
}
},