vue如何設(shè)置定時(shí)器和清理定時(shí)器
設(shè)置定時(shí)器和清理定時(shí)器
使用鉤子函數(shù)對定時(shí)器進(jìn)行清理,失敗了
1.在data中聲明要設(shè)置的定時(shí)器名稱
data() { ? ? ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? timer: null ?// 定時(shí)器名稱 ? ? ? ? ? ? ? } ? ? ? ? },
2.在mounted中創(chuàng)建定時(shí)器
this.timer = (() => { ? ? // 某些操作 }, 5000)復(fù)制代碼3、在頁面注銷時(shí)清理定時(shí)器:beforeDestroy() { ? ? clearInterval(this.timer); ? ? ? ? ? ? this.timer = null; }
然鵝,并沒什么卵用,在切換頁面后,定時(shí)任務(wù)依然頑強(qiáng)的奔跑著。
beforeDestroy() { ? ? clearInterval(this.timer); ? ? ? ? ? ? this.timer = null; ? ? console.log(this.timer) ? ? ? ? ? ?//輸出為: null,但是任務(wù)依然在繼續(xù)運(yùn)行 }
可能是我的姿勢不對吧。害羞.jpg經(jīng)過在各大論壇一番查找發(fā)現(xiàn):通過$once這個(gè)事件偵聽器在定義完定時(shí)器之后的位置來清除定時(shí)器:
const timer = setInterval(() =>{ ? ? ? ? ? ? ? ? ? ? ? ? // 某些定時(shí)器操作 ? ? ? ? ? ? ? ? }, 5000); ? ? ? ? ? ? // 通過$once來監(jiān)聽定時(shí)器 // 在beforeDestroy鉤子觸發(fā)時(shí)清除定時(shí)器 this.$once('hook:beforeDestroy', () => { ? ? ? ? ? ? ? ? clearInterval(timer); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })?
哇,成功了...
定時(shí)器的使用全解
1.vue使用定時(shí)器
在vue中使用定時(shí)器,很多情況下,進(jìn)入和退出vue界面,都沒有清除定時(shí)器,從而導(dǎo)致有很多定時(shí)器一起工作,這樣肯定是不行的,接下來就使用當(dāng)用戶進(jìn)入界面時(shí)啟用定時(shí)器,當(dāng)用戶離開當(dāng)前界面時(shí)就清除定時(shí)器。
2代碼實(shí)現(xiàn)
<template> </template> <script> import store from '@/store' import Vue from 'vue' export default { name: "test", data () { return { timer: null } }, methods: { setTimer() { if(this.timer == null) { this.timer = setInterval( () => { console.log('開始定時(shí)...每過一秒執(zhí)行一次') }, 1000) } } }, created: function() { this.getFamilyBase_info() // 每次進(jìn)入界面時(shí),先清除之前的所有定時(shí)器,然后啟動新的定時(shí)器 clearInterval(this.timer) this.timer = null this.setTimer() }, destroyed: function () { // 每次離開當(dāng)前界面時(shí),清除定時(shí)器 clearInterval(this.timer) this.timer = null } } </script> <style scoped> </style>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue離開頁面時(shí)如何銷毀定時(shí)器
- Vue如何優(yōu)雅的清除定時(shí)器
- Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題
- VUE簡單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法
- VUE中setTimeout和setInterval自動銷毀案例
- vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題
- Vue中使用 setTimeout() setInterval()函數(shù)的問題
- Vue中使用定時(shí)器(setInterval、setTimeout)的兩種方式
相關(guān)文章
在vue-cli項(xiàng)目中使用bootstrap的方法示例
本篇文章主要介紹了在vue-cli項(xiàng)目中使用bootstrap的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue.js實(shí)現(xiàn)開關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開關(guān)(switch)組件的實(shí)例代碼,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue-cli項(xiàng)目修改文件熱重載失效的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目修改文件熱重載失效的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09