vue中使用setInterval()循环定时器的注意事项

2023-11-26 02:03| 来源: 网络整理| 查看: 265

问题描述

在我们做项目中，经常需要使用定时器做一些重复的任务，比如接口轮询更新数据等。本篇文章记录一下vue项目中使用定时器的一些注意事项。

注意事项

使用定时器的时候，主要是要注意使用定时器的以下情况

什么时候开始setInterval()定时器页面一进来就使用定时器或者以事件的形式比如点击按钮开始使用定时器什么时候结束setInterval()定时器页面离开时候清除定时器或者以事件的形式比如点击按钮形式清除定时器特别的需要注意，是否在被缓存组件中使用定时器即是否在被keep-alive包裹的组件中使用定时器情况一，点击事件情况下使用定时器

假设我们有两个按钮，点击一个开始定时器，点击另外一个结束定时器。代码如下：

点击开始定时器点击结束定时器 export default { data() { return { timer: null,// 初始定时器变量名为null }; }, methods: { start() { // 将定时器名字赋值到变量中 this.timer = setInterval(() => { console.log("开始---"); }, 1000); }, end() { clearInterval(this.timer); this.timer = null // 这里最好清除一下，回归默认值 // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。 console.log(this.timer); }, }, // 在离开这个页面的时候，（比如路由跳转到别的页面）必须要清除一下这个定时器，定时器不手动清除的话，会一直存在并执行 // 直到我们的项目服务停掉，或者关机。所以适当时候清除定时器是非常有必要的。不然耗费性能，且容易造成代码混乱 beforeDestroy() { // js提供的clearInterval方法用来清除定时器 clearInterval(this.timer); }, // beforeDestroy或destroyed钩子中都能去清除这个定时器 // destroyed() { // // clearInterval(this.timer); // }, };

如果是页面一进来就要执行定时器，可以在mounted钩子中写个定时器让其执行，注意要加上if判断，要把定时器清除掉。代码如下：

mounted钩子注册定时器要及时清除 mounted() { this.getConsole() /* 最初始情况，项目刚打开的时候，这个时候页面是必定没有定时器的，那么逻辑就会走else，这个时候就会注册一个定时器去循环调用相应逻辑代码后续有三种情况情况一：路由跳转，跳走了，就要清除这个定时器，所以在beforeDestroy钩子中要清除定时器情况二：关闭项目，关闭项目了以后，系统就会自动停掉定时器，这个不用管它情况三：刷新页面，这个时候vue组件的钩子是不会执行beforeDestroy和destroyed钩子的，所以需要加上if判断一下，若还有定时器的话，就清除掉，所以这个就是mounted钩子的if判断的原因 */ if (this.timer) { clearInterval(this.timer); } else { this.timer = setInterval(this.getConsole, 1000); } }, methods: { getConsole() { console.log("定时器"); }, }, beforeDestroy() { clearInterval(this.timer); }, 情况二，keep-alive中使用定时器

如果使用了keep-alive包裹组件后，组件的生命周期就是如下了：

- 初始进入组件离开 created ---> mounted ---> activated --> deactivated - 后续进入和离开 activated --> deactivated

所以如果想要在keep-alive包裹的组件中使用定时器，并且想要在组件一进入就执行定时器，就只能在activated 钩子中写定时器的执行了，当然清除定时器就要写在deactivated钩子里面了。因为使用了keep-alive包裹的组件就没有了beforeDestroy、destroyed这样的钩子了，而且mounted钩子也就只会执行一次了。

如果是点击事件执行或者清除定时器的话，正常写就行了

定时器执行：

activated () { // 这里也要及时清除掉定时器 if(this.timer){ clearInterval(this.timer); }else{ this.timer = setInterval(() => { console.log("开始---"); }, 1000); } },

定时器清除：

deactivated () { clearInterval(this.timer) this.timer = null },

如果想要了解keep-alive的更多详细用法，欢迎访问我的另一篇文章：juejin.cn/post/696250…

【本文地址】

公司简介

联系我们