解决Vue3中定时器自动销毁问题

解决Vue3中定时器自动销毁问题

1.前言

在近期的一个Vue项目中使用到了定时器，由于本人没有系统学习过前端，对前端项目的水平仅限于能够使用，一些细节上可能存在问题，比如定时器这个问题。在项目中，页面自动刷新、切换后还在重复不停的发送请求的问题。

2.问题

在setTimeout中用来调用请求数据的方法，我遇到的问题是，刚开始只想到怎么实现定时请求的问题，没有用合适的方法去关闭setTimeout，在离开当前页面后，请求还在不断的发送问题，这样给服务器带来了不必要的压力。

3.解决实例

export default {
    data() {
        return {
            timer: null,
            gps: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getData()
        })
        // 使用定时器
        this.timer = setInterval(() => {
            setTimeout(this.getData(), 0)) // 如果有多个请求，指定执行顺序
        }, 1000) // 1000ms 
    },
    // vue3中使用beforeUnmount
    beforeUnmount() {
        console.log("定时器清除")
        clearInerval(this.timer) // 清除定时器
        this.timer = null
    },
    methods: {
        // 用于请求数据的方法
        getData() {
            getGPSDataApi().then(res => {
                console.log("GPS", res.data)
            })
        }
    }
}

4.完整代码

<template>
    <div>
		<span>GPS: {{ gps }}</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            timer: null,
            gps: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getData()
        })
        // 使用定时器
        this.timer = setInterval(() => {
            setTimeout(this.getData(), 0)) // 如果有多个请求，指定执行顺序
        }, 1000) // 1000ms 
    },
    // vue3中使用beforeUnmount
    beforeUnmount() {
        console.log("定时器清除")
        clearInerval(this.timer) // 清除定时器
        this.timer = null
    },
    methods: {
        // 用于请求数据的方法
        getData() {
            getGPSDataApi().then(res => {
                console.log("GPS", res.data)
            })
        }
    }
}
</script>