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

目录
  • 设置定时器和清理定时器
    • 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue setInterval 定时器失效的解决方式

    正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave 补充知识:vue中使用定时器的坑 我们在使用vue的脚手架去搭建开发环境的时候,在A页面写入一个定时器去定时请求一个接口,但是我们去B页面,C页面的时候都会有这个接口定时请求的现象,那么怎样处理呢? 第一步: 首先我在data函数里面进行定义定时器名

  • vue离开页面时如何销毁定时器

    vue离开页面时如何销毁定时器

    目录 vue离开页面销毁定时器 组件里定时器销毁问题 解决方法1 解决方案2 vue离开页面销毁定时器 beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭  }  //利用vue的生命周期函数 vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可. 组件里定时器销毁问题 我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样

  • Vue(定时器)解决mounted不能获取到data中的数据问题

    vue中data定义 data() { return { isok:10, } } 在vue中使用定时器 如下 mounted是钩子函数 mounted(){ console.log(this.isok) //能获取isok 10 setInterval(function(){ console.log(this.isok) //不能获取 isok }, 3000); } 这是为什么呢? 原因就是:定时器的this是指向 window的. 那有什么方法来解决这个问题呢?答案是有的,两种 第一种:

  • Vue如何优雅的清除定时器

    目录 前言 优化 衍生问题:beforeDestroy 没有触发? 前言 清除定时器,相信有相当一部分人是这么写的: export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer) } } 这是一段常见的代

  • vue通过定时器实现垂直滚动公告

    vue通过定时器实现垂直滚动公告

    前言 最近项目有个需求是做一个垂直滚动的公告,其中也涉及到了设置定时器和清除定时器方面的知识点,在这里记录下过程,不对的地方欢迎大家指正,一起共同进步! 思路 1. 写好样式,把滚动的内容循环出来,固定显示区域的高度,超出隐藏2. 设置定时器,将第一条数据塞到最后一个,删除第一条数据,暂停播放3. 在mounted中创建并执行定时器4. destroyed中清除定时器 HTML部分 <div class="roll">       <div class="r

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

    目录 设置定时器和清理定时器 1.在data中声明要设置的定时器名称 2.在mounted中创建定时器 定时器的使用全解 1.vue使用定时器 2代码实现 设置定时器和清理定时器 使用钩子函数对定时器进行清理,失败了 1.在data中声明要设置的定时器名称 data() {                 return {                                       timer: null  // 定时器名称               }         },

  • vue项目开发中setTimeout等定时器的管理问题

    一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

  • TCP 四种定时器（重传定时器，坚持计时器，保活定时器，时间等待计时器）

    TCP 四种定时器 重传定时器 主要为了防止报文丢失或者阻塞.当A向B发送报文时,就会启动重传定时器,若在定时器到达之后,仍没有收到B的确认报文,则A会重新发送上次发送的报文.同时,令重传定时器复位.继续计时. 坚持计时器 此计时器针对下面场景: 当B向A发送了0窗口报文,B此时已经没有空间接受A发送的数据了,通知A停止发送.A在收到后即停止发送,等待一段时间后,B有了一些空间,可以继续接收了.此时再向A发送非0窗口报文.如果此非0窗口报文在网络中阻塞或者丢失了,那么A将永远以为B没有空间接收数

  • 在vue里面设置全局变量或数据的方法

    实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像

  • Vue 动态设置路由参数的案例分析

    在vue中 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>

  • Vue 项目代理设置的优化

    Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式,这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试,也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项.它是采用了 http-proxy 库,所以具体配置可查看: https://github.com/nodejitsu/node-http-proxy#options 利用配置的这些参数我们可以做更为灵活的配置,达到

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

  • python 定时器,轮询定时器的实例

    python 定时器默认定时器只执行一次,第一个参数单位S,几秒后执行 import threading def fun_timer(): print('Hello Timer!') timer = threading.Timer(1, fun_timer) timer.start() 改成以下可以执行多次 建立loop_timer.py from threading import _Timer class LoopTimer(_Timer): """Call a funct

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

随机推荐