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

问题描述

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

注意事项

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

  • 什么时候开始setInterval()定时器

    • 页面一进来就使用定时器
    • 或者以事件的形式比如点击按钮开始使用定时器
  • 什么时候结束setInterval()定时器

    • 页面离开时候清除定时器
    • 或者以事件的形式比如点击按钮形式清除定时器
  • 特别的需要注意,是否在被缓存组件中使用定时器

    • 即是否在被keep-alive包裹的组件中使用定时器

情况一,普通情况下使用定时器

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



如果是页面一进来就要执行定时器,可以在mounted钩子中写个定时器让其执行,可以手动按钮点击清除,但是离开页面的时候一定要清除定时器,因为用户可能忘了点击清除定时器的按钮了

情况二,keep-alive中使用定时器

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

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

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

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

定时器执行:

activated () {
    this.timer = setInterval(() => {
        console.log("开始---");
      }, 1000);
  },

定时器清除:

deactivated () {
    clearInterval(this.timer)
    this.timer = null
  },
如果想要了解keep-alive的更多详细用法,欢迎访问我的另一篇文章: https://segmentfault.com/a/11...

你可能感兴趣的:(vue中使用setInterval()循环定时器的注意事项)