VUE设置和清除定时器的方式及遇到的问题

目录
  • 方法一、在生命周期函数beforeDestroy中清除
  • 方法二、使用hook:beforedestroy（推荐）
  • 三、beforeDestroy函数没有触发的情况
    • 1、原因
    • 2、解决方案
  • 附：vue离开页面销毁定时器
  • 总结

方法一、在生命周期函数beforeDestroy中清除

data() {
    return {
      timer: null;
    };
},
created() {
    // 设置定时器，5s执行一次
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);
}
beforeDestroy () {
    //清除定时器
    clearInterval(this.timer);
    this.timer = null;
}

方法二、使用hook:beforedestroy（推荐）

created() {
    // 设置定时器，5s执行一次
    let timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);

    // 离开当前页面时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer);
      timer = null;
    })
}

该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样，但更有优势

1.无需在vue实例上定义定时器，减少不必要的内存浪费

2.设置和清除定时器的代码放在一块，可读性维护性更好

三、beforeDestroy函数没有触发的情况

1、原因

<router-view>外层包裹了一层<keep-alive>

< keep-alive > 有缓存的作用，可以使被包裹的组件状态维持不变，当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在

< keep-alive > 中创建的组件，会多出两个生命周期钩子: activated 与 deactivated。

activated

在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated

在组件失活时调用。

2、解决方案

借助 activated 和 deactivated 钩子来设置和清除定时器

(1)生命周期钩子

created() {
    // 页面激活时设置定时器
    this.$on("hook:activated", () => {
        let timer = setInterval(()=>{
          console.log("setInterval");
        },1000)
    })

    // 页面失活时清除定时器
    this.$on("hook:deactivated", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }

(2)hook

data() {
    return {
      timer: null // 定时器
    }
},
activated() {
    // 页面激活时开启定时器
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000)
},
deactivated() {
    // 页面关闭（路由跳转）时清除定时器
    clearInterval(this.timer)
    this.timer = null
},

附：vue离开页面销毁定时器

vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。

data: {
    return {
        timer: null
    }
},
created() {
    this.timer = setInterval(....);
},
beforeDestroy() {
    if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
    }
}

总结

到此这篇关于VUE设置和清除定时器的文章就介绍到这了,更多相关VUE设置和清除定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

  • vue页面使用多个定时器的方法

    本文实例为大家分享了vue页面使用多个定时器的具体代码,供大家参考,具体内容如下 问题描述 vue页面使用多个定时器 html: <div class="prod-item">       <ul>         <li           v-for="(item, index) in state.list"           :key="index"           :class="[    

  • Vue清除定时器setInterval优化方案分享

    两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = (() => { // 某些操作 }, 1000) 最后在beforeDestroy()生命周期内清除定时器: beforeDestroy() { clearInterval(this.timer); this.timer = null; } 方案1有

  • 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设置和清除定时器的方式及遇到的问题

    目录 方法一.在生命周期函数beforeDestroy中清除 方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案 附:vue离开页面销毁定时器 总结 方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l

  • 关于vue路由缓存清除在main.js中的设置

    1.main.js /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp.$watch(key, function (val) { //console.log("page &q

  • Vue 设置图片不转为base64的方式

    Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

  • 前端Vue设置cookie、删除cookie,获取cookie方式

    目录 Vue设置cookie.删除cookie.获取cookie 设置cookie 获取cookie 删除cookie Vue允许跨域携带cookie Vue设置cookie.删除cookie.获取cookie 在main.js中如下设置 设置cookie Vue.prototype.Setcookie = function (name,value) {   //设置名称为name,值为value的Cookie   var expdate = new Date();   //初始化时间   ex

  • JS实现给不同元素设置不同的定时器

    JS实现给不同元素设置不同的定时器

    本文实例为大家分享了JS实现给不同元素设置不同的定时器,供大家参考,具体内容如下 案例效果: 上面的紫色盒子打开页面会自己移动到300px,点击上面的按钮,粉色的span才会移动,并且移动到200px. 注意:需要给定时器单独命名,如果都写在同一个封装函数里面的话,每次都会开辟一个定时器的空间,这样就会造成资源浪费,所以直接采用给对象添加定时器属性的方式来节约空间.同时要注意,在设置定时器之前要清除掉这个对象的定时器属性,因为如果不清除的话,当连续按下按钮的时候就会又开启一个定时器这样下面那个s

  • Linux使用一个定时器实现设置任意数量定时器功能

    为什么需要这个功能,因为大多数计算机软件时钟系统通常只能有一个时钟触发一次中断.当运行多个任务时,我们会想要多个定时器 的时钟跟踪并发这样可以生成正确的时间重叠,操作系统这样做. 本例子是为了实现使用Linux下的一个定时器,实现任一数量的定时器功能. 首先我们需要一些数据类型用来描述时钟数据结构 #include <stdio.h> #include<time.h> #define TRUE 1 #define FALSE 0 #define MAX_TIMERS ... 最大时

  • vue的style绑定background-image的方式和其他变量数据的区别详解

    问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backgroundImage:'url(' + item.vide

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

随机推荐