vue项目中定时器使用

前言

在Vue项目开发中，定时器是一种常用的技术手段。

定时器，常用的方法有两种：

• setTimeout，是JavaScript中的一个内置函数，可以在指定的时间延迟后执行一段代码；只执行一次；
• setInterval，是JavaScript中的常用的定时器函数，可以按照指定时间间隔重复执行一段代码；

这里我们重点介绍setInerval的用法。当我们要实现定时更新界面或者轮询接口数据时，用setInterval非常合适。

示例代码1

 在Vue组件的生命周期钩子函数中使用setInterval，通常在created或者mounted中定义定时器，在beforeDestroy中销毁。

例子中，在打开该vue组件(或者页面）时定时器开启，该vue组件退出时自动销毁。

// 在Vue组件的生命周期钩子函数中使用setInterval
created() {
  this.timer = setInterval(() => {
    // 执行需要定时重复执行的任务
  }, 2000); // 每2秒钟执行一次
},
beforeDestroy() {
  if (this.timmer) {
    clearInterval(this.timer); // 销毁组件前清除定时器
  }
}

示例代码2

在函数内部定义定时器，在执行该函数后触发。比如某些异步操作后，需要轮询接口更新状态等。

beforeDestroy() {
  clearInterval(this.timer); // 销毁组件前清除定时器
}

methods: {
  functionA() {
    // 在函数内部定义定时器，在执行该函数后触发。比如某些异步操作后，需要轮询接口更新状态等。
    this.timer = setInterval(() => {
      // 执行需要定时重复执行的任务
      this.apiFunction()
    }, 2000); // 每2秒钟执行一次
}

其余使用场景可根据实际需求实现。

合理使用定时器

在使用定时器时，应该注意以下几点：

（1）避免使用过多的定时器。如果一个页面中存在大量的定时器，就会导致页面卡顿、响应变慢等问题。因此，我们应该尽量避免使用过多的定时器，只在必要的时候使用。

（2）避免使用过长的延迟时间。如果一个定时器的延迟时间过长，就会导致用户体验变差。因此，我们应该尽量使用较短的延迟时间，比如100毫秒左右。

（3）在组件销毁时清除定时器。如果不清除定时器，就会导致内存泄漏的问题。因此，在组件销毁时，应该清除所有的定时器，可以通过Vue提供的beforeDestroy钩子函数来实现。