以下清除定時器的舊方法:
1须板、在data函數(shù)里面進(jìn)行定義定時器名稱
2乞封、在beforeDestroy()生命周期內(nèi)清除定時器
這種做法的缺點(diǎn)是:
(1)vue實(shí)例中需要有這個定時器的實(shí)例,感覺有點(diǎn)多余;
(2)創(chuàng)建的定時器代碼和銷毀定時器的代碼沒有放在一起蜈首,通常很容易忘記去清理這個定時器实抡,不容易維護(hù);
新的清除定時器方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器欠母。優(yōu)點(diǎn)是使得代碼可讀性更強(qiáng),一目了然吆寨。以下是完整代碼:
直接在需要定時器的方法或者生命周期函數(shù)中聲明并銷毀
export default{
methods:{
fun1(){
const timer = setInterval(()=>{
//需要做的事情
console.log(11111);
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
在頁面中需要定時刷新局部數(shù)據(jù)赏淌,在數(shù)據(jù)變化是否頻繁的情況下,沒有必要使用webSocket啄清,因?yàn)閿?shù)據(jù)變化頻繁六水,數(shù)據(jù)實(shí)時變化太快看不清楚。因此頁面會定時調(diào)用后臺接口以達(dá)到實(shí)時刷新數(shù)據(jù)的效果辣卒。
1掷贾、在data中定義一個定時器變量,timer
2荣茫、在mounted中把定時器的復(fù)制為timer
3想帅、頁面離開前,在beforeDestroy 中清除定時器timer
data() {
return {
timer:null, //定時器名稱
}
}啡莉,
created() { this.getHangTotal();
},
mounted() { this.timer = setInterval( this.getHangTotal, 10000 );
}港准,
beforeDestroy(){
clearInterval(this.timer); // 清除定時器
this.timer = null;
},
methods: {
getHangTotal(){ //…………
}
}