一、問題

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);
    },
  },
};

五、總結(jié)

在開發(fā)過程中，定時器是會經(jīng)常用得到的，這種情況發(fā)生的機率很小，但并不是不會發(fā)生，為了避免該情況發(fā)生，這一個解決方案可能并不是很完美，但是能夠解決這類問題 如果有更好的解決方案，或者使用該解決方案解決類似問題的遇到了問題!!!

最新評論