vue中清除定时器的方法实例详解

2025-06-28 12:52:38

一、问题

1、在vue中使用setTimeout定时器的时候，可能会遇到关不掉的情况，会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了，但是有时候没生效，定时器还会继续执行。

2、在这里需要说一下setTimeout的使用场景：

（1）需要执行一次定时的时候用得到，比如需要在多久之后执行的一次操作

（2）接口需要定时查询，并且需要在接口返回数据后再查询的情况下（接口定时查询的时候，该方式会经常用得到）

二、问题出现的原因

场景：目前有个接口方法，执行该方法需要5s执行完成，并且还需要在执行完后定时查询数据

问题原因分析：

（1）问题发生的场景

a. 该方法需要5s执行完，但是当执行到该方法中第2s的时候，切换页面的时候将该组件销毁了

b. 销毁了该组件，但是该方法还是会在缓存中执行往下执行，并不会因为组件销毁而停止执行后面的代码，所以后面的定时器还是会执行到，并且后续的定时器也会一直执行

c. 因为一直在缓存中执行，并且组件已经销毁了，所以定时器就会存在清不掉的情况

（2）这种情况是偶发性的，很少有需要执行5s的方法，为了将该问题复现测试，我测试的时候是自己模拟了一下这个场景，所以使用的是5s；大部分的情况可能是几十毫秒或者几百毫秒就可以执行完成了，但是在销毁的时候，恰好处于方法执行的过程中，就会导致定时器清不掉的情况

三、问题解决思路

1、解决的思路跟我之前写的关于定时器的使用及页面切换时定时器无法清除的问题解决办法这篇文章差不多，是基于该文章的思路的一个补充，可以一起参考下

2、在使用定时器的组件中，使用一个curPageUrl来记录当前使用组件的页面所在的路由地址

该参数是用于对比路由跳转的情况，如果该参数和当前访问的路由地址不一致，那么就能判断出使用定时器的组件已经销毁了，不需要再继续执行了

3、在created或mounted中为curPageUrl赋初始值

this.curPageUrl = this.$route.path;

4、在使用定时器的方法中判断是否往下执行

if (this.curPageUrl && this.curPageUrl != this.$route.path) {
    return false;
}

5、在beforeDestroy和destroyed中为curPageUrl赋一个永远不能出现的一个值，并且清除定时器

this.curPageUrl = "end";
this.realtimeLoadPointDataTimer && clearTimeout(this.realtimeLoadPointDataTimer);

四、实现的源代码

export default {
  data() {
    return {
      curPageUrl: "", // 当前页面的路由地址
    };
  },
  watch: {},
  created() {
    this.query();

    this.curPageUrl = this.$route.path;
  },
  mounted() {},
  beforeDestroy() {
    this.curPageUrl = "end";
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  destroyed() {
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  methods: {
    /** 查询数据 */
    query() {
      this.realtimeLoadPointDataTimer &&
        clearTimeout(this.realtimeLoadPointDataTimer);

      if (this.curPageUrl && this.curPageUrl != this.$route.path) {
        return false;
      }

      // 设置延迟5秒执行回调函数
      setTimeout(() => {
        if (this.checked == true) {
          // 设置500毫秒执行一次
          this.realtimeLoadPointDataTimer = setTimeout(() => {
            this.query();
          }, 500);
        }
      }, 5000);
    },
  },
};

五、总结

在开发过程中，定时器是会经常用得到的，这种情况发生的机率很小，但并不是不会发生，为了避免该情况发生，这一个解决方案可能并不是很完美，但是能够解决这类问题如果有更好的解决方案，或者使用该解决方案解决类似问题的遇到了问题!!!

Vue中使用定时器(setInterval、setTimeout)的两种方式

目录 1. 循环执行( setInterval ) 2. 定时执行 ( setTimeout) js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout. 注意:定时器需要在页面销毁的时候清除掉,不然会一直存在! 1. 循环执行( setInterval ) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉:语法: setInterval(code, milliseconds): setInterval(f
vue中定时器setInterval的使用及说明

目录深坑声明销毁 that 是指vue , this是指定时器 positionTimer 总结深坑自己在项目中使用setInterval,由于不正确的使用,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于定时器的用法及注意事项声明 mouted() { this.timer = setInterval(()=>{ // 要执行的函数 }) } 销毁 destoryed() { this.clearInterval(this.timer) } 看起来是很简单也没
VUE设置和清除定时器的方式及遇到的问题

目录方法一.在生命周期函数beforeDestroy中清除方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案附:vue离开页面销毁定时器总结方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l
vue项目使用定时器每隔几秒运行一次某方法代码实例

目录代码如下: setInterval()和setTimeout()的区别: 补充知识:定时执行 ( setTimeout) 总结代码如下: data() { return { timer:null, //定时器名称 } }, created() { this.setTime(); }, beforeDestroy(){ clearInterval(this.timer); // 清除定时器 this.timer = null; }, methods: { setTime(){ //每隔一分
vue全局使用axios的方法实例详解

在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us
vue中v-model动态生成的实例详解

vue中v-model动态生成的实例详解前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
Vue.js框架路由使用方法实例详解

Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
IOS 中KVC的使用方法实例详解

IOS 中KVC的使用方法实例详解 KVC是Key Value Coding的缩写,意思是键值编码.在iOS中,提供了一种方法通过使用属性的名称(也就是Key)来间接访问对象的属性方法.说的有的拗口,实际上就是通过类定义我们可以看到类的各种属性,那么使用属性的名称我们就能访问到类实例化后的对象的这个属性值. 这个方法可以不通过getter/setter方法来访问对象的属性.因为一个类的成员变量如果没有提供getter/setter的话,外界就失去了对这个变量的访问渠道.而KVC则提供了一种访问的
Vue中util的工具函数实例详解

Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)
vue父子组件的通信方法(实例详解)

一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
vue 中命名视图的用法实例详解

今天主要记录 vue中命名视图的用法先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件.内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个 router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-
Vue中实现过渡动画效果实例详解

目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用过渡的模式mode 列表过渡列表过渡的介绍列表过渡的使用总结 Vue的transition动画 Transition动画的使用在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动
Vue中使用方法、计算属性或观察者的方法实例详解

熟悉 Vue 的都知道方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&