广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何设置定时器和清理定时器
  • 856
分享到

vue如何设置定时器和清理定时器

2024-04-02 19:04:59 856人浏览 八月长安
摘要

目录设置定时器和清理定时器1.在data中声明要设置的定时器名称2.在mounted中创建定时器定时器的使用全解1.Vue使用定时器2代码实现设置定时器和清理定时器 使用钩子函数对定

设置定时器和清理定时器

使用钩子函数对定时器进行清理,失败了

1.在data中声明要设置的定时器名称

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},

2.在mounted中创建定时器

this.timer = (() => {
    // 某些操作
}, 5000)复制代码3、在页面注销时清理定时器:beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}

然鹅,并没什么卵用,在切换页面后,定时任务依然顽强的奔跑着。

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
    console.log(this.timer)            //输出为: null,但是任务依然在继续运行
}

可能是我的姿势不对吧。害羞.jpg经过在各大论坛一番查找发现:通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器:

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 5000);            
// 通过$once来监听定时器
// 在beforeDestroy钩子触发时清除定时器
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
}) 

哇,成功了...

定时器的使用全解

1.vue使用定时器

在vue中使用定时器,很多情况下,进入和退出vue界面,都没有清除定时器,从而导致有很多定时器一起工作,这样肯定是不行的,接下来就使用当用户进入界面时启用定时器,当用户离开当前界面时就清除定时器。

2代码实现

<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('开始定时...每过一秒执行一次')
                    }, 1000)
                }
            }
        },
        created: function() {
            this.getFamilyBase_info()
            // 每次进入界面时,先清除之前的所有定时器,然后启动新的定时器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次离开当前界面时,清除定时器
            clearInterval(this.timer)
            this.timer = null
        }
    }
</script>
<style scoped>
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何设置定时器和清理定时器

本文链接: https://www.lsjlt.com/news/150098.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何设置定时器和清理定时器
    目录设置定时器和清理定时器1.在data中声明要设置的定时器名称2.在mounted中创建定时器定时器的使用全解1.vue使用定时器2代码实现设置定时器和清理定时器 使用钩子函数对定...
    99+
    2022-11-13
  • vue怎么设置定时器和清理定时器
    本篇内容介绍了“vue怎么设置定时器和清理定时器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!设置定时器和清理定时器使用钩子函数对定时器进行...
    99+
    2023-06-30
  • linux定时器如何设置时间
    在Linux中,可以使用cron工具来设置定时器任务的时间。要设置cron定时器的时间,可以使用以下命令:```crontab -e...
    99+
    2023-10-09
    linux
  • Vue如何优雅的清除定时器
    目录前言 优化 衍生问题:beforeDestroy 没有触发? 前言 清除定时器,相信有相当一部分人是这么写的: export default { data() { ...
    99+
    2022-11-12
  • VUE设置和清除定时器的方式及遇到的问题
    目录方法一、在生命周期函数beforeDestroy中清除 方法二、使用hook:beforedestroy(推荐)三、beforeDestroy函数没有触发的情况1、原因...
    99+
    2022-11-13
    vue设置定时器调用方法 vue切换页面清除所有定时器 vue清除定时器
  • es6如何清除定时器
    今天小编给大家分享一下es6如何清除定时器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 ...
    99+
    2022-10-19
  • Vue怎么优雅的清除定时器
    这篇文章主要介绍“Vue怎么优雅的清除定时器”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么优雅的清除定时器”文章能帮助大家解决问题。前言清除定时器,相信有...
    99+
    2022-10-19
  • java定时器怎么设置
    在Java中,可以使用`java.util.Timer`类来创建定时器。下面是一个简单的示例,展示了如何使用Timer类设置一个定时...
    99+
    2023-08-30
    java
  • javascript如何清除所有定时器
    小编给大家分享一下javascript如何清除所有定时器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • windows10定时关机如何设置windows10定时关机设定方式
    你可以设定定时关机,这样就不需要手动关闭电脑了,因为某些客户经常在固定时间完成他们的操作。那麼windows10定时关机如何设置呢?先调成运行窗口,随后输入“shutdown-s-t7200”并运作就可以了,这儿的7200可以更换为其他数据...
    99+
    2023-07-17
  • 如何使用HTML设置一个定时器
    这篇文章将为大家详细讲解有关如何使用HTML设置一个定时器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。用HTML设置一个定时器的方法:首先新建一个html页面,并设置一个按钮;然后给这个按钮绑定一个函数...
    99+
    2023-06-14
  • java定时任务时间如何设置
    在Java中,可以使用java.util.Timer类或者java.util.concurrent.ScheduledExecuto...
    99+
    2023-10-09
    java
  • win11如何设置定时关机时间
    win11如何设置定时关机时间?我们升级了电脑系统之后,里面也多了许多实用的功能,我们在实用电脑的时候,有时候会忘记关闭电脑,电脑长时间的不关闭容易造成卡顿,这种情况我们就可以设置定时关闭,很多小伙伴不知道如何设置定时关闭,小编下面整理了w...
    99+
    2023-07-10
  • vue中清除定时器的方法实例详解
    目录一、问题二、问题出现的原因三、问题解决思路四、实现的源代码五、总结一、问题 1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在befor...
    99+
    2023-02-07
    vue清除定时器方法 设置定时器和清除定时器 vue 定时
  • vue离开页面时如何销毁定时器
    目录vue离开页面销毁定时器组件里定时器销毁问题解决方法1解决方案2vue离开页面销毁定时器 beforeDestroy() { if(this.timer) {     clear...
    99+
    2022-11-13
  • vue中定时器setInterval如何使用
    今天小编给大家分享一下vue中定时器setInterval如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。声明&nbs...
    99+
    2023-07-05
  • Win10如何设置定时关机
    本篇内容介绍了“Win10如何设置定时关机”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!设置方法:在键盘上按下【win+R】组合键,调出运行...
    99+
    2023-06-27
  • xp如何设置定时关机
    这篇文章主要介绍了xp如何设置定时关机的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇xp如何设置定时关机文章都会有所收获,下面我们一起来看看吧。xp设置定时关机:在桌面建立一个新的“文本文档”。 右击该文档点击...
    99+
    2023-07-01
  • win7定时关机如何设置
    要在Windows 7中设置定时关机,您可以按照以下步骤操作:1. 点击开始菜单,然后选择“控制面板”。2. 在控制面板中,选择“系...
    99+
    2023-08-21
    win7
  • ubuntu如何设置定时重启
    ubuntu设置定时重启的方法:在ubuntu上打开终端命令行模式。通过以下命令来设置定时重启,例如:sudo crontab -e10 2 * * * /sbin/rebootcd /etccrontab crontab意义:在凌晨2点1...
    99+
    2022-10-03
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作