1. 程式人生 > 程式設計 >解決vue 使用setTimeout,離開當前路由setTimeout未銷燬的問題

解決vue 使用setTimeout,離開當前路由setTimeout未銷燬的問題

問題:

從第一個頁面跳轉到第二個頁面後,如果停留在第二個頁面,定時器還在執行。如果在兩個頁面之間來回跳轉,跳轉時間小於定時器的間隔時間時,也會出現重複建立setTimeout的情況。

原因:

當我們重新整理頁面時,會將當前頁面之前建立的setTimeout以及其他定時器都清除掉,但是僅僅是路由切換是不會清除的。

data () {
  return {
   ct: null
  }
},
methods: {
 start() {
 this.ct= setTimeout( () => {that.countdown(end)},1000)
 }
 end() {
 clearTimeout(this.ct); //清除
 }
}

setInterval()計時也需要clearInterval()來清除

補充知識:小記VUE下setTimeOut和setInterval遇到的問題

相信大家對著兩個函式都陌生,就是一個定時器,setTimeOut只執行一次,而setInterval會重複執行

需要注意的是:在setInterval不用的時候一定要用clearSetInterval關閉定時器。

說一下最近開發中遇到的問題,我是用vue開發的,順便記錄這個錯誤。

我需要輪詢介面,所以使用setInterval。

// 我是想沒2秒執行一次myFunc這個函式。
setInterval(this.myFunc(),2000)
//某個函式
myFunc () {
  console.log(123)
}

但實際的執行結果是,只執行了一遍,並沒有迴圈執行。

原因是setInterval接受兩個引數,第一個為要執行的函式,第二個為時間(毫秒)。

這裡我犯的錯誤是,我寫的是一個函式的執行this.myFunc() 因為加了()是一個執行,而不是個函式。

於是我又改成這樣寫了,在寫個匿名函式,函式體是我要執行的。

setInterval(function () {
 this.myFunc()
},2000)
//某個函式
myFunc () {
  console.log(123)
}

理論上這樣是沒問題的,會每2秒執行一次this.myFunc(),但卻報錯了。

原因是 老生常談的javaScript 的this 的問題。

因為用的一個function(){} 這裡的 獨立的作用域 this指向了全域性(這裡是window)而且window裡沒有myFunc這個函式,所報了錯。

用過vue的朋友應該,基本vue中都是this.XXX這樣寫。這裡的this是Vue物件。

所以為了使this正確指向vue,我用了ES6的尖頭函式。

最終

setInterval(() => {
 this.myFunc()
},2000)
//某個函式
myFunc () {
  console.log(123)
}

尖頭函式因為它的特殊性,它的this指向它外層的物件。

其實主要說的是第二個問題,第一個屬於對函式不熟悉,第二個則是VUE,ES6,this指向綜合的問題。

以上這篇解決vue 使用setTimeout,離開當前路由setTimeout未銷燬的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。