vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式

更新時間：2023年06月29日 09:14:51 作者：肖邦的交響樂

這篇文章主要介紹了vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器

我看了別人寫的博客關(guān)于設(shè)置和清除定時器都比較復(fù)雜，我感覺其實很簡單的幾行代碼就好。

把我的寫法記錄一下。

methods中

setTime() { //設(shè)置定時器
? this.clearTimeSet=setInterval(() => {
? ? this.webSocketClientOnopen();
? }, 1000);
},
clearTime() { //清除定時器
? clearInterval(this.clearTimeSet);
}

mounted 中

mounted : { //頁面加載完畢就開始加載定時器
? this.setTime();
}

beforeDestroy() { ? ?//頁面關(guān)閉時清除定時器 ?
? clearInterval(this.clearTimeSet);
},

還有在tab頁面加定時器和銷毀定時器

stro() { //主頁A
? ? ? ? ? ? this.timeClss = setInterval(() => {
? ? ? ? ? ? ? ? this.getFirstList()
? ? ? ? ? ? }, 5 * 100)
? ? ? ? },
? ? ? ? twosli() {// 主頁B
? ? ? ? ? ? this.times = ?setInterval(() => {
? ? ? ? ? ? ? ? this.getThirdList()
? ? ? ? ? ? }, 5 * 100)
? ? ? ? },
? ? ? ? clearTime() { // 主頁A 清除
? ? ? ? ? ? clearInterval(this.timeClss)
? ? ? ? },
? ? ? ? clearcloss() { // 主頁B 清除
? ? ? ? ? ? clearInterval(this.times)
? ? ? ? },

?handleClick(tab, event) { // 每個tab點(diǎn)擊切換的函數(shù)方法
? ? ? ? ? ? if(tab.label == '主頁A'){
? ? ? ? ? ? ? ? this.getFirstList()
? ? ? ? ? ? ? ? this.stro()?
? ? ? ? ? ? ? ? this.clearcloss()
? ? ? ? ? ? }else if(tab.label == '工單A'){
? ? ? ? ? ? ? ? this.getSecList()
? ? ? ? ? ? ? ? this.clearTime()
? ? ? ? ? ? ? ? this.clearcloss()
? ? ? ? ? ? }else if(tab.label == '主頁B'){
? ? ? ? ? ? ? ? this.getThirdList()
? ? ? ? ? ? ? ? this.twosli()
? ? ? ? ? ? ? ? this.clearTime()
? ? ? ? ? ? }else if(tab.label == '工單B'){
? ? ? ? ? ? ? ? this.getFourList()
? ? ? ? ? ? ? ? this.clearcloss()
? ? ? ? ? ? ? ? this.clearTime()
? ? ? ? ? ? }
? ? ? ? }

首先，把定時器和清除定時器的方法分別寫成函數(shù)方法，然后在handleClick方法中當(dāng)要切換tab的時候，在不需要的tab選項卡里調(diào)用定時器和清除定時器的方法就好了，這個就可以清除或設(shè)置定時器了！

vue定時器的使用全解

vue使用定時器

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

代碼實現(xiàn)

<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('開始定時...每過一秒執(zhí)行一次')
                    }, 1000)
                }
            }
        },
        created: function() {
            this.getFamilyBase_info()
            // 每次進(jìn)入界面時，先清除之前的所有定時器，然后啟動新的定時器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次離開當(dāng)前界面時，清除定時器
            clearInterval(this.timer)
            this.timer = null
        }
    }
</script>
<style scoped>
</style>