问题形容

在咱们做我的项目中，常常须要应用定时器做一些反复的工作，比方接口轮询更新数据等。本篇文章记录一下vue我的项目中应用定时器的一些注意事项。

注意事项

应用定时器的时候，次要是要留神应用定时器的以下状况

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

    • 页面一进来就应用定时器
    • 或者以事件的模式比方点击按钮开始应用定时器

  • 什么时候完结setInterval()定时器

    • 页面来到时候革除定时器
    • 或者以事件的模式比方点击按钮模式革除定时器

  • 特地的须要留神，是否在被缓存组件中应用定时器

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

状况一，一般状况下应用定时器

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

<template>  <div>    <el-button type="primary" plain @click="start">点击开始定时器</el-button>    <el-button type="primary" plain @click="end">点击完结定时器</el-button>  </div></template><script>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);  // },};</script>
如果是页面一进来就要执行定时器，能够在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...