Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)

更新時(shí)間：2023年10月20日 11:42:58 作者：web小奶精

這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下

背景

如果在頁面/組件增加了定時(shí)器，就算跳轉(zhuǎn)到其他頁面，定時(shí)器也不會(huì)被清理，這時(shí)候就需要手動(dòng)清理，不然會(huì)有意想不到的bug，也會(huì)影響性能。

提示

setTimeout是只執(zhí)行一次，setInterval是循環(huán)執(zhí)行，以下是用setTimeout舉例子，如果想要用setInterval，替換一次方法就行。

setTimeout替換成setInterval
clearTimeout替換成clearInterval

銷毀一個(gè)定時(shí)器

<script setup>
import {onMounted, onUnmounted} from "vue";

//注意哈，這里是個(gè)空
const timer = ref()

//先創(chuàng)建一個(gè)定時(shí)器
onMounted(() => {
  timer.value=setTimeout(() => {
    // do something
  }, 1500)
})

//在頁面銷毀之前先銷毀定時(shí)器
onUnmounted(() => {
  clearTimeout(timer.value)
  timer.value=""
})

銷毀多個(gè)定時(shí)器

<script setup>
import {onMounted, onUnmounted} from "vue";

//注意哈，是個(gè)數(shù)組，不是對(duì)象，當(dāng)然用對(duì)象的方式也行
const timer = ref([])

//先創(chuàng)建數(shù)個(gè)定時(shí)器
onMounted(() => {
  timer.value.push(setTimeout(() => {
    // do something
  }, 1500))
  timer.value.push(setTimeout(() => {
    // do something
  }, 1800))
})

//在頁面銷毀之前先銷毀定時(shí)器
onUnmounted(() => {
  for (const timerElement of timer.value) {
    clearTimeout(timerElement)
  }
  timer.value=[]
})

補(bǔ)充：要想setTimeout指向正確的值，可以使用如下方法：

1、使用箭頭函數(shù)

export default {
 methods: {
  start: function () {
   setTimeout(() => {
    this.end()//娃娃消失
   }, 4000);
  }
 }
}

此時(shí)函數(shù)的this指向的是定義它的時(shí)候的對(duì)象，也就是this指向了data內(nèi)中對(duì)應(yīng)的變量。

總結(jié)

到此這篇關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的文章就介紹到這了,更多相關(guān)Vue3 setup語法糖銷毀定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: