快捷導(dǎo)航

vue中清除定時器的方法實例詳解

更新時間：2023年02月07日 09:22:33 作者：coderZzb

很多情況下,進入和退出vue界面,都沒有清除定時器,從而導(dǎo)致有很多定時器一起工作,這樣肯定是不行的,下面這篇文章主要給大家介紹了關(guān)于vue中清除定時器的方法,需要的朋友可以參考下

一、問題

1、在vue中使用setTimeout定時器的時候，可能會遇到關(guān)不掉的情況，會存在明明已經(jīng)在beforeDestroy和destroyed中設(shè)置了定時器清除了，但是有時候沒生效，定時器還會繼續(xù)執(zhí)行。

2、在這里需要說一下setTimeout的使用場景：

（1）需要執(zhí)行一次定時的時候用得到，比如需要在多久之后執(zhí)行的一次操作

（2）接口需要定時查詢，并且需要在接口返回數(shù)據(jù)后再查詢的情況下（接口定時查詢的時候，該方式會經(jīng)常用得到）

二、問題出現(xiàn)的原因

場景：目前有個接口方法，執(zhí)行該方法需要5s執(zhí)行完成，并且還需要在執(zhí)行完后定時查詢數(shù)據(jù)

問題原因分析：

（1）問題發(fā)生的場景

a. 該方法需要5s執(zhí)行完，但是當(dāng)執(zhí)行到該方法中第2s的時候，切換頁面的時候?qū)⒃摻M件銷毀了

b. 銷毀了該組件，但是該方法還是會在緩存中執(zhí)行往下執(zhí)行，并不會因為組件銷毀而停止執(zhí)行后面的代碼，所以后面的定時器還是會執(zhí)行到，并且后續(xù)的定時器也會一直執(zhí)行

c. 因為一直在緩存中執(zhí)行，并且組件已經(jīng)銷毀了，所以定時器就會存在清不掉的情況

（2）這種情況是偶發(fā)性的，很少有需要執(zhí)行5s的方法，為了將該問題復(fù)現(xiàn)測試，我測試的時候是自己模擬了一下這個場景，所以使用的是5s；大部分的情況可能是幾十毫秒或者幾百毫秒就可以執(zhí)行完成了，但是在銷毀的時候，恰好處于方法執(zhí)行的過程中，就會導(dǎo)致定時器清不掉的情況

三、問題解決思路

1、解決的思路跟我之前寫的關(guān)于定時器的使用及頁面切換時定時器無法清除的問題解決辦法這篇文章差不多，是基于該文章的思路的一個補充，可以一起參考下

2、在使用定時器的組件中，使用一個curPageUrl來記錄當(dāng)前使用組件的頁面所在的路由地址

該參數(shù)是用于對比路由跳轉(zhuǎn)的情況，如果該參數(shù)和當(dāng)前訪問的路由地址不一致，那么就能判斷出使用定時器的組件已經(jīng)銷毀了，不需要再繼續(xù)執(zhí)行了

3、在created或mounted中為curPageUrl賦初始值

this.curPageUrl = this.$route.path;

4、在使用定時器的方法中判斷是否往下執(zhí)行

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

5、在beforeDestroy和destroyed中為curPageUrl賦一個永遠(yuǎn)不能出現(xiàn)的一個值，并且清除定時器

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

四、實現(xiàn)的源代碼

export default {
  data() {
    return {
      curPageUrl: "", // 當(dāng)前頁面的路由地址
    };
  },
  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: {
    /** 查詢數(shù)據(jù) */
    query() {
      this.realtimeLoadPointDataTimer &&
        clearTimeout(this.realtimeLoadPointDataTimer);

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

      // 設(shè)置延遲5秒執(zhí)行回調(diào)函數(shù)
      setTimeout(() => {
        if (this.checked == true) {
          // 設(shè)置500毫秒執(zhí)行一次
          this.realtimeLoadPointDataTimer = setTimeout(() => {
            this.query();
          }, 500);
        }
      }, 5000);
    },
  },
};