一、問(wèn)題

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

2、在這里需要說(shuō)一下setTimeout的使用場(chǎng)景：

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

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

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

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

問(wèn)題原因分析：

（1）問(wèn)題發(fā)生的場(chǎng)景

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

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

c. 因?yàn)橐恢痹诰彺嬷袌?zhí)行，并且組件已經(jīng)銷毀了，所以定時(shí)器就會(huì)存在清不掉的情況

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

三、問(wèn)題解決思路

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

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

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

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

this.curPageUrl = this.$route.path;

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

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

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

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

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

export default {
  data() {
    return {
      curPageUrl: "", // 當(dāng)前頁(yè)面的路由地址
    };
  },
  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é)

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

最新評(píng)論