vue定时器

第一种：setTimeout

方法： 设置一次性定时器setTimeout 销毁一次性定时器clearTimeout

区别：setTimeout用于在指定的延迟后执行一次代码。

示例代码：

*// 导出默认的Vue组件配置对象* 
export default {  *// 定义组件的初始数据* 
 data() {  
  *// 初始化一个用于存储定时器返回值的变量，以便后续可以清除这个定时器*   
 return {     
 timer: null  
  }; 
 },   
*// 组件实例被挂载到DOM后调用的生命周期钩子*  
mounted() {   
 this.timer = setTimeout(() => {     
 console.log('这条信息将在3秒后显示');    
}, 3000); *// 3000毫秒后执行*  },  

 *// 在组件实例销毁之前调用的生命周期钩子* 

 beforeDestroy() {    *// 使用clearTimeout清除在mounted阶段设置的定时器*    *// 这一步非常重要，可以避免由于定时器未被清除导致的内存泄漏问题*  
  clearTimeout(this.timer);  
} 
};

使用流程：

第一步：在data里定义变量，这里示例是timer。

第二步：设置定时器

this.timer = setTimeout(() => {

//这里可以替换成你自己的代码

}, 3000); // 3000毫秒后执行

},

第三步：销毁定时器

clearTimeout(this.timer);

下面一种同理

第二种： setInterval

方法： 设置一次性定时器setInterval 销毁一次性定时器clearInterval

区别：setInterval用于每隔指定的时间间隔重复执行代码。

示例代码：

// 导出默认的Vue组件配置对象
export default {
  // 定义组件的初始数据
  data() {
    return {
   // 初始化一个用于存储定时器返回值的变量，以便后续可以清除这个定时器
​      timer: null  
​    };
  },
  mounted() {
​    this.timer = setInterval(() => {
​      //你自己想要轮询的代码
​    }, 3000); // 每3000毫秒重复执行
  },
  beforeDestroy() {
​      clearInterval(this.timer);
  }
};

使用时记得将其在生命周期函数中销毁，定时器是不随着组件的销毁而消失的，简而言之，就是这个定时器会一直存在，不论你刷新页面还是跳转其他页面都会一直执行这个定时器。