問題：

從第一個(gè)頁面跳轉(zhuǎn)到第二個(gè)頁面后,如果停留在第二個(gè)頁面，定時(shí)器還在運(yùn)行。如果在兩個(gè)頁面之間來回跳轉(zhuǎn),跳轉(zhuǎn)時(shí)間小于定時(shí)器的間隔時(shí)間時(shí)，也會(huì)出現(xiàn)重復(fù)創(chuàng)建setTimeout的情況。

原因：

當(dāng)我們刷新頁面時(shí)，會(huì)將當(dāng)前頁面之前創(chuàng)建的setTimeout以及其他定時(shí)器都清除掉,但是僅僅是路由切換是不會(huì)清除的。

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

setInterval()計(jì)時(shí)也需要clearInterval()來清除

補(bǔ)充知識(shí)：小記VUE下setTimeOut和setInterval遇到的問題

相信大家對(duì)著兩個(gè)函數(shù)都陌生，就是一個(gè)定時(shí)器，setTimeOut只執(zhí)行一次，而setInterval會(huì)重復(fù)執(zhí)行

需要注意的是：在setInterval不用的時(shí)候一定要用clearSetInterval關(guān)閉定時(shí)器。

說一下最近開發(fā)中遇到的問題，我是用vue開發(fā)的，順便記錄這個(gè)錯(cuò)誤。

我需要輪詢接口，所以使用setInterval。

// 我是想沒2秒執(zhí)行一次myFunc這個(gè)函數(shù)。
setInterval(this.myFunc(),2000)
//某個(gè)函數(shù)
myFunc () {
  console.log(123)
}

但實(shí)際的運(yùn)行結(jié)果是，只執(zhí)行了一遍，并沒有循環(huán)執(zhí)行。

原因是setInterval接受兩個(gè)參數(shù)，第一個(gè)為要執(zhí)行的函數(shù)，第二個(gè)為時(shí)間（毫秒）。

這里我犯的錯(cuò)誤是，我寫的是一個(gè)函數(shù)的執(zhí)行this.myFunc() 因?yàn)榧恿耍ǎ┦且粋€(gè)執(zhí)行，而不是個(gè)函數(shù)。

于是我又改成這樣寫了，在寫個(gè)匿名函數(shù)，函數(shù)體是我要執(zhí)行的。

setInterval(function () {
 this.myFunc()
},2000)
//某個(gè)函數(shù)
myFunc () {
  console.log(123)
}

理論上這樣是沒問題的，會(huì)每2秒執(zhí)行一次this.myFunc()，但卻報(bào)錯(cuò)了。

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

因?yàn)橛玫囊粋€(gè)function（）{} 這里的 獨(dú)立的作用域 this指向了全局（這里是window）而且window里沒有myFunc這個(gè)函數(shù)，所報(bào)了錯(cuò)。

用過vue的朋友應(yīng)該，基本vue中都是this.XXX這樣寫。這里的this是Vue對(duì)象。

所以為了使this正確指向vue，我用了ES6的尖頭函數(shù)。

最終

setInterval(() => {
 this.myFunc()
},2000)
//某個(gè)函數(shù)
myFunc () {
  console.log(123)
}

尖頭函數(shù)因?yàn)樗奶厥庑?，它的this指向它外層的對(duì)象。

其實(shí)主要說的是第二個(gè)問題，第一個(gè)屬于對(duì)函數(shù)不熟悉，第二個(gè)則是VUE，ES6，this指向綜合的問題。

以上這篇解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論