vue怎么設置定時器和清理定時器

本篇內容介紹了“vue怎么設置定時器和清理定時器”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

設置定時器和清理定時器

使用鉤子函數對定時器進行清理，失敗了

1.在data中聲明要設置的定時器名稱

data() {            
    return {                              
        timer: null  // 定時器名稱          
    }        
},

2.在mounted中創建定時器

this.timer = (() => {
    // 某些操作
}, 5000)3、在頁面注銷時清理定時器：beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}

然鵝，并沒什么卵用，在切換頁面后，定時任務依然頑強的奔跑著。

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
    console.log(this.timer)            //輸出為: null,但是任務依然在繼續運行
}

可能是我的姿勢不對吧。害羞.jpg經過在各大論壇一番查找發現：通過$once這個事件偵聽器在定義完定時器之后的位置來清除定時器：

const timer = setInterval(() =>{                    
    // 某些定時器操作                
}, 5000);            
// 通過$once來監聽定時器
// 在beforeDestroy鉤子觸發時清除定時器
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

哇，成功了...

定時器的使用全解

1.vue使用定時器

在vue中使用定時器，很多情況下，進入和退出vue界面，都沒有清除定時器，從而導致有很多定時器一起工作，這樣肯定是不行的，接下來就使用當用戶進入界面時啟用定時器，當用戶離開當前界面時就清除定時器。

2代碼實現

<template>
</template>
<script>
    import store from '@/store'
    import Vue from 'vue'
    export default {
        name: "test",
        data () {
            return {
                timer: null
            }
        },
        methods: {
            setTimer() {
                if(this.timer == null) {
                    this.timer = setInterval( () => {
                        console.log('開始定時...每過一秒執行一次')
                    }, 1000)
                }
            }
        },
        created: function() {
            this.getFamilyBase_info()
            // 每次進入界面時，先清除之前的所有定時器，然后啟動新的定時器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次離開當前界面時，清除定時器
            clearInterval(this.timer)
            this.timer = null
        }
    }
</script>
<style scoped>
</style>

“vue怎么設置定時器和清理定時器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！