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

正常情况下，在data里定义homeSetInterval 保存定时器的ID值 ，在销毁组件是使用clearInterval方法是可行的

但在使用了如下的keep缓存模式在使用销毁模式不行了

应该使用离开路由器前方法beforeRouteLeave

补充知识：vue中使用定时器的坑

我们在使用vue的脚手架去搭建开发环境的时候，在A页面写入一个定时器去定时请求一个接口，但是我们去B页面，C页面的时候都会有这个接口定时请求的现象，那么怎样处理呢？

第一步：

首先我在data函数里面进行定义定时器名称：

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

第二步：

在要用的方法中使用定时器

this.timer = (() => {
// 某些操作
}, 1000)

第三步：

beforeDestroy()生命周期内清除定时器

  beforeDestroy() {
  clearInterval(this.timer);
  this.timer = null;
  }

以上这篇vue setInterval 定时器失效的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue 组件中的setInterval方法和window的不同

    vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性 因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //

  • 在vue中使用setInterval的方法示例

    昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题. 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变data里面的数据,从而做到数据实时变化,这样方便与我来做数字翻页动画. 代码如下: <template> <div class="totel-number"> <div class="panel-top&quo

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

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

  • vue 实现setInterval 创建和销毁实例

    问题 setInterval 是间隔调用,与之类似的还有 setTimeout.这两个 API 通常用来做 ajax 短连接轮询数据. 比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志: <template> <div> <p v-for="item in logList" :key="item.time"> <span>{{"[" + item.time + "]&q

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

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

  • vue-element-admin 菜单标签失效的解决方式

    设置菜单路由时,代码如下: { path: '/materieluse', component: Layout, meta: { title: '仓库管理', icon: 'component' }, children: [{ path: 'materielList', component: () => import('@/views/materieluse/materielList'), name: 'icons', meta: { title: '请料管理' } }, { path: 'it

  • IIS进程回收导致定时器失效的解决方法（CMD命令）

    公司开发的网站使用的.net,网站中用到了定时器,放在Global.asax.cs文件中,但由于IIS设置了网站进程定期回收,回收后定时器也就没了.如果不让进程回收,又担心程序中有内存泄露.有人说可以在Application_End发起HTTP请求,但这样做和设置不让进程回收没有任何区别,结果就是该进程一直运行,只有保证不存在内存泄露才可以这样做.也有人说可以用Windows Service,对这个不了解,所以这招放弃了.最后想到了一个方法,编写脚本命令(这里用DOS命令)访问网站,再通过Win

  • thinkPHP使用post方式查询时分页失效的解决方法

    thinkPHP使用post方式查询时分页失效的解决方法

    本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

  • 浏览器关闭使session失效的问题多种解决方式

    如果用户不点击网站的"退出"链接,而直接关闭浏览器(或者强制关闭浏览器进程.死机等),服务器无法处理用户退出网站的请求,解决方式如下: 方式1:在每个页面中加入隐藏的IFrame,以异步刷新的方式定期刷新iframe页面,如每隔10S刷新一次,当服务器在一定的时间内未收到用户的刷新请求,则认为用户已经退出 优点:能在短时间内判断出用户是否已经退出 缺点:增加用户请求次数,所消耗的服务器资源较大 方式2:使用cookie保存用户登录信息,不要设置cookie的过期时间,当关闭浏览器时,c

  • 解决vue热替换失效的根本原因

    新手刚开始使用vue时,常会遇见一个坑,那就是热替换失效. 什么?你跟我说使用官方的vue-cli去构建,我就是使用vue-cli后突然失效. 什么?你跟我说重新npm run dev一下,好嘛,已经run了N次了依然没回到大路上. 经过在网上一番查找,发现基本没有这个问题的详解,可能是这个问题太低级了? 讲解一下热替换的原理:热替换是在执行npm run dev后,会启动一个本地服务器(webpack-dev-server),这个服务器会观察源代码编译出来的文件.一旦修改了源代码,就会立刻编译

  • 解决VUE双向绑定失效的问题

    双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致 表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • vue router 传参获取不到的解决方式

    在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(){ console.log(this.$route.params) //这里输出undifined } 导致这样的原因是因为params需要通过name来获

  • vue transition 在子组件中失效的解决

    错误代码: 子组件: <template> <div v-show="showMine"> <div class="mask" @click.self="onMask"></div> <transition name="slide-fade"> <div class="my_group" v-if="showMine"&g

随机推荐