vue項目開發中setTimeout等定時器的管理問題

一、問題來源。

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

顯然，這個可以用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有本質的不同，前者只執行一次，除非你在回調中，不斷的調用，而后者是不間斷調用的。但是，我在各種實踐中發現，

還是setTimeout好用。因為，setTimeout可以根據條件，及時在回調中停用。如果采用setinterval，我們很有可能捕捉不到停用的條件而無法停用。

補充：Vue之SetTimeout

1.前言

相信很多人都遇到過這樣的問題，頁面數據需要不斷的刷新，也就是不斷的發送ajax請求來更新數據，那么在vue中怎樣做才比較好呢？這里介紹一下我踩的坑，以及解決方案

2.問題

settimeout用來調用請求數據，但是我遇到的問題就是，沒有用合適的方式去關閉settimeout,出現了離開當前頁面，請求還在不斷的發送問題，這樣給服務器帶來了無必要的壓力。附上之前的代碼：

self.deployTimeOutId = setTimeout(() => {
 self.getDeployList(false);
 }, 5000);

說明：這一段代碼是嵌在getDeployList方法中的，離開當前頁面的是時候，必須要去手動的把這個settimeout清除才行。一般這個寫在destoryed()這個鉤子里。

window.clearTimeout(this.deployTimeOutId);

雖然這樣處理了，但在邏輯比較復雜的情況下，還是出現了沒有關閉的情況，而且排查起來很痛苦。下面介紹一種針對Vue比較好的做法。

3.解決方案

 let self=this;
 if (self && !self._isDestroyed) {
 setTimeout(() => {
 if (self && !self._isDestroyed)
 self.getDeployList();
 }, 5000);
 }

_isDestroyed這個屬性表示的是當前這個組件是否有被銷毀，true表示當前的組件已經被銷毀，通過上面這個判斷，我們就不需要自己手動的去用ID來清除了，這個就相當于遞歸嘛，有了一個結束判斷，避免了死循環咯~~

總結

以上所述是小編給大家介紹的vue項目開發中setTimeout等定時器的管理問題，希望對大家有所幫助，如果大家有任何疑問請

給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com