快捷導(dǎo)航

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

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

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

背景

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

提示

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

setTimeout替換成setInterval
clearTimeout替換成clearInterval

銷毀一個定時器

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

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

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

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

銷毀多個定時器

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

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

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強(qiáng)大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細(xì)代碼,感興趣的朋友跟隨小編一起看看吧
2024-02-02
Vue3 全局錯誤處理詳解與示例
本文展示一個完整的 Vue 3 全局錯誤處理模塊,用于捕獲和處理應(yīng)用中的各種錯誤,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2026-02-02
vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
vue中的rem如何配置
這篇文章主要介紹了vue中的rem如何配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
vue實現(xiàn)彈窗引用另一個頁面窗口
這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue Element UI 解決表格數(shù)據(jù)不更新問題及解決方案
在使用Vue和ElementUI開發(fā)后臺管理系統(tǒng)時,可能會遇到表格數(shù)據(jù)不更新的問題,這通常是因為Vue的響應(yīng)式系統(tǒng)未檢測到數(shù)據(jù)變化或數(shù)據(jù)更新后未正確觸發(fā)視圖的重新渲染,本文給大家介紹vue Element UI 解決表格數(shù)據(jù)不更新問題,感興趣的朋友一起看看吧
2024-10-10
基于vue2.0的活動倒計時組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計時組件，可以使用服務(wù)端時間作為當(dāng)前時間，在倒計時開始和結(jié)束時可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下
2018-10-10
Vue3實現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下
2024-08-08
Vue中虛擬DOM的簡單實現(xiàn)
Vue中的虛擬DOM是通過JavaScript對象來描述真實DOM結(jié)構(gòu)的一種方式，本文將介紹Vue中虛擬DOM的簡單實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下
2023-05-05