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

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

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

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

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

把我的寫法記錄一下。

methods中

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

mounted 中

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

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

還有在tab頁面加定時(shí)器和銷毀定時(shí)器

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) { // 每個(gè)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í)器和清除定時(shí)器的方法分別寫成函數(shù)方法，然后在handleClick方法中當(dāng)要切換tab的時(shí)候，在不需要的tab選項(xiàng)卡里調(diào)用定時(shí)器和清除定時(shí)器的方法就好了，這個(gè)就可以清除或設(shè)置定時(shí)器了！

vue定時(shí)器的使用全解

vue使用定時(shí)器

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

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