关于vue.js:vue中使用setInterval循环定时器的注意事项

45次阅读

共计 1677 个字符,预计需要花费 5 分钟才能阅读完成。

问题形容

在咱们做我的项目中,常常须要应用定时器做一些反复的工作,比方接口轮询更新数据等。本篇文章记录一下 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…

正文完
 0