vue中定時(shí)器setInterval的使用及說明

更新時(shí)間：2023年03月02日 15:02:22 作者：奧特蛋_mm

這篇文章主要介紹了vue中定時(shí)器setInterval的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

深坑

自己在項(xiàng)目中使用setInterval，由于不正確的使用，竟然導(dǎo)致了瀏覽器崩潰，項(xiàng)目停止，電腦死機(jī)…可怕之極，下面詳細(xì)寫一下關(guān)于定時(shí)器的用法及注意事項(xiàng)

聲明

    mouted() {
    	this.timer = setInterval(()=>{
    	// 要執(zhí)行的函數(shù)
    	})
    }

銷毀

destoryed() {
	this.clearInterval(this.timer)
}

看起來是很簡(jiǎn)單也沒有什么，但是坑來了，實(shí)際項(xiàng)目中使用

在這里插入圖片描述

    addSetInterval() {
      const that = this
      this.positionTimer = setInterval(() => {
        if (that.resultArr.length < that.times) {
          clearInterval(that.positionTimer)
          that.positionTimer = null
          console.log(that.times)
        } else {
          // 分批部署基站
          if (that.times < that.resultArr.length) {
            that.deployBaseStation()
            console.log('渲染數(shù)組的第' + that.times + '項(xiàng)')
          }
          that.times++
        }
        console.log(1111111111111)
      }, 500)
    },

由于這里定義了定時(shí)器，箭頭函數(shù)內(nèi)部和外部的作用域不同了，要定義一個(gè)變量來使函數(shù)內(nèi)部使用vue數(shù)據(jù)的時(shí)候指向不出錯(cuò)，

that 是指vue , this是指定時(shí)器 positionTimer

之前為了確認(rèn)定時(shí)器已經(jīng)停止了，在destory中和定時(shí)器中都輸出了定時(shí)器的值，即 console.log(this.positionTimer)，然而，上圖

在這里插入圖片描述

離開當(dāng)前路由，再回到當(dāng)前路由，之后控制臺(tái)打印

在這里插入圖片描述

然后不久之后就是

在這里插入圖片描述

WTF???

在請(qǐng)教了同學(xué)之后，她說可能跟我打印定時(shí)器也有關(guān)系，輸出的時(shí)候調(diào)用了定時(shí)器，導(dǎo)致定時(shí)器關(guān)閉失敗，我也是真的無奈了，一開始也沒有定義額外的變量來確定this的指向，具體原因不明，總之，在不輸出定時(shí)器，改加了額外的變量之后，定時(shí)器停止了

最終代碼如下：

  destroyed() {
    clearInterval(this.positionTimer)// 清除定時(shí)器
    this.positionTimer = null
    // 離開路由之后斷開websocket連接
    this.webSocketOnClose()
    this.websocketclose()
  },
  methods: {
    // 添加定時(shí)器
    addSetInterval() {
      const that = this  // 聲明一個(gè)變量指向vue實(shí)例this,保證作用域一致
      this.positionTimer = setInterval(() => {
        if (that.resultArr.length < that.times) {
          clearInterval(that.positionTimer)
          that.positionTimer = null
          console.log(that.times)
        } else {
          // 分批部署基站
          if (that.times < that.resultArr.length) {
            that.deployBaseStation()
            console.log('渲染數(shù)組的第' + that.times + '項(xiàng)')
          }
          that.times++
        }
        console.log(1111111111111)
      }, 500)
    },