一、問題來源。

在項目中，我們經常有這樣的需求，一個頁面初始化后，需要不斷的去請求后端，來獲取當前某個記錄的最新狀態。

顯然，這個可以用setTimeout以及回調中繼續setTimeout來實現。

我們假設定時器是在頁面#/test/aaa上創建的。

但是，會遇到以下兩個問題，我從#/test/aaa   這個頁面切換到  #/test/bbb頁面后如果停留在#/test/bbb，定時器還在跑。

其次，如果我不斷在#/test/aaa 和 #/test/bbb兩個頁面之間不斷的切換，而且切換時間小于定時器的間隔時間時，也會出現

重復創建setTimeout的情況。

現在的問題就是，我們如何做到管理定時器。

二、示例代碼。

created() {  if ( this.timeOut ) {    clearTimeout(this.timeOut);  }  this.getListIng();},computed: {  timeOut: {    set (val) {      this.$store.state.timeout.compileTimeout = val;    },    get() {      return this.$store.state.timeout.compileTimeout;    }  },},methods: {  getListIng() {    // 這里是一個http的異步請求    if ( getUrlModule() == 'aaa' ) {      let _this = this;      this.timeOut = setTimeout(() => {        _this.getListIng();      }, 5000);    } else {      this.timeOut = '';    }  },}

（1）如上面代碼所示，當創建頁面（created執行）時，會先判斷變量this.timeOut是否存在，如果存在，先clearTimeout掉。

（2）而，this.timeOut這個變量對應的是全局store里的this.$store.state.timeout.compileTimeout。并且是雙向綁定的，這個

請自行搜索vue2.0中computed用法。

 （3）在我們的主函數getListIng()中，會先使用函數getUrlModule()根據url判斷當前頁面是否是aaa頁面，如果是的，就執行setTimeOut，

如果不是，就不行執行了，并且設置this.timeOut = '';

我們假設上面沒有if ( getUrlModule() == 'aaa' ) 這句判斷，會出現，當我們已經跳出了當前aaa頁面，去了bbb頁面并且一直停留在bbb頁面時，

還有setTimeout在執行，就會不斷有http的請求。

如果沒有if ( this.timeOut ) { clearTimeout(this.timeOut); } 這句代碼。當我們不斷在2個頁面之間切換時，且切換的頻率很高。會出現多次創建

setTimeout的情況。這個邏輯稍微有點繞，請閱讀者自行演算。

三、我們必須清楚的事實。

（1）vue中$store里創建的變量，其實是全局變量，這個變量在切換頁面時不會清除，當我們刷新頁面時會清除掉。

（2）在前端頁面中，當我們刷新頁面時，會將當前頁面之前創建的setTimeout以及其他定時器都清除掉。但是，切換頁面（僅僅是路由切換）

是不會清除的。

（3）setTimeout、setinterval有本質的不同，前者只執行一次，除非你在回調中，不斷的調用，而后者是不間斷調用的。但是，我在各種實踐中發現，