我在一个运行良好的组件上设有倒数计时器。问题是,一旦用户离开组件页面,我希望间隔停止。我试图在beforeDestroy挂钩中清除clearInterval,但是由于某种原因,我仍然从间隔中每隔一秒钟就会收到错误,并且找不到ID为null的ID。这些错误仅在组件被销毁后才会发生。
<template>
<div class="countdown">
<img class="cover-image" src="@/assets/img/image_cover_image@2x.png" />
<div class="countdown-container">
<h2>Countdown to placeholder:</h2>
<div class="counter">
<div>
<div id="day">0</div>
Days
</div>
<div>
<div id="hour">0</div>
Hours
</div>
<div>
<div id="minute">0</div>
Minutes
</div>
<div>
<div id="second">0</div>
Seconds
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Countdown',
data() {
return {
countDate: new Date('Jan 1, 2021 00:00:00:00').getTime(),
counter: null,
};
},
beforeCreate() {
this.counter = setInterval(() => {
const now = new Date().getTime();
const gap = this.countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
let d = Math.floor(gap / day);
let h = Math.floor((gap % day) / hour);
let m = Math.floor((gap % hour) / minute);
let s = Math.floor((gap % minute) / second);
if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
clearInterval(this.counter);
d = 0;
h = 0;
m = 0;
s = 0;
}
document.querySelector('#day').innerText = d;
document.querySelector('#hour').innerText = h;
document.querySelector('#minute').innerText = m;
document.querySelector('#second').innerText = s;
}, 1000);
},
beforeDestroy() {
clearInterval(this.counter);
},
};
</script>
答案 0 :(得分:2)
我认为该错误来自beforeCreate
挂钩。在beforeCreate
钩中,该组件在DOM中不可用。
尝试将beforeCreate
挂钩中的逻辑移动到mounted
挂钩,该挂钩在组件安装在DOM中时被调用。