這篇文章主要講解了Vue清除定時器setInterval的方案，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
兩種方案清除定時器，開發者經常使用方案1，建議使用方案2
方案1
首先我在data函數里面進行定義定時器名稱：
data() {
return {
timer: null // 定時器名稱
}
},然后這樣使用定時器：
this.timer = (() => {
// 某些操作
}, 1000)最后在beforeDestroy()生命周期內清除定時器：
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}方案1有兩點不好的地方，引用尤大的話來說就是：
它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴重的問題，但是它可以被視為雜物。
我們的建立代碼獨立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。
方案2
該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。
以下是完整代碼：
const timer = setInterval(() =>{
// 某些定時器操作
}, 500);
// 通過$once來監聽定時器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})其他程序化的事件偵聽器
通過 $on(eventName, eventHandler) 偵聽一個事件
通過 $once(eventName, eventHandler) 一次性偵聽一個事件
通過 $off(eventName, eventHandler) 停止偵聽一個事件
附官網詳細地址：程序化事件偵聽器
補充知識：vue在mounted中創建定時器與清除定時器
我就廢話不多說了，大家還是直接看代碼吧~
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a) //當num等于100時清除定時器
}
}, 1000);
}看完上述內容，是不是對Vue清除定時器setInterval的方案有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
