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

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

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

背景

如果在頁面/組件增加了定時器，就算跳轉到其他頁面，定時器也不會被清理，這時候就需要手動清理，不然會有意想不到的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ù)組，不是對象，當然用對象的方式也行
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)中對應的變量。

總結

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

您可能感興趣的文章:

使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧
2024-02-02
Vue3 全局錯誤處理詳解與示例
本文展示一個完整的 Vue 3 全局錯誤處理模塊,用于捕獲和處理應用中的各種錯誤,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
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ī)范,結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
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的響應式系統(tǒng)未檢測到數(shù)據(jù)變化或數(shù)據(jù)更新后未正確觸發(fā)視圖的重新渲染,本文給大家介紹vue Element UI 解決表格數(shù)據(jù)不更新問題,感興趣的朋友一起看看吧
2024-10-10
基于vue2.0的活動倒計時組件countdown(附源碼下載)
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結束時可以自定義回調函數(shù)。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下
2018-10-10
Vue3實現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構建功能強大、風格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下
2024-08-08
Vue中虛擬DOM的簡單實現(xiàn)
Vue中的虛擬DOM是通過JavaScript對象來描述真實DOM結構的一種方式，本文將介紹Vue中虛擬DOM的簡單實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下
2023-05-05