在项目中,我们经常会使用到定时器setInterval(),可是很多时候我们会发现,即使我退出当前页面,定时器依然在工作,非常消耗内存,所以我们要进行手动清理:

将定时器保存在变量中,退出页面时清除变量

1.定义空的变量

data: function (){

  return {

    timer: null

  }

}

2.定义定时器

methods: {

  setTimer: function () {

    this.timer = setInterval( () => {

        .....  

      }, 1000)

  }

}

3.进入和退出时清除定时器

mounted() {

  clearInterval(this.timer)

},

distroyed: function () {

  clearInterval(this.timer)

}

vue 定时器的问题的更多相关文章

  1. vue定时器+弹框 跳到登陆页面

    1.做一个请求拦截,并弹框提示几秒后,跳转到登陆首页或是点击确定之后直接跳转拦截用了this.$axios.interceptors.response页面上的弹框组件用了vux的组件vux地址:htt ...

  2. vue定时器

    mounted(){ setInterval(this.getasks,1000 * 120); },

  3. vue离开页面销毁定时器

    beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭 }  //利用vue的生命周期函数 vue 是单页面应用,路由切换 ...

  4. vue 项目中,定时器(setInterval)的写法

    vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...

  5. Vue清除所有JS定时器

    Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...

  6. VUE清除组件内部定时器

    定时器如果不手动清除,只会在离开当前页面或者F5刷新后才会清除.由于vue项目是SPA应用,离开当前组件后并不会清除定时器,所以需要我们手动去清除定时器.但当我们将清除定时器clearInterval ...

  7. VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用

    <body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...

  8. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

  9. 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题

    2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...

随机推荐

  1. GPUImage中对比度调整的实现——GPUImageContrastFilter

    对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,差异范围越大代表对比越大,图像越鲜亮,差异范围越小代表对比越小,图像越灰. GPUImage中实现了对比度调整的Filter,其 ...

  2. centos官网下载旧版本办法

    https://blog.csdn.net/yu0_zhang0/article/details/78503439 在 /etc/yum.conf 的 [main] 后面添加以下配置即可! exclu ...

  3. 高程三 DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. Spring注解之 Transactional

    @Transcational 用于事务回滚 @Transcational属性如下: 属性 类型 描述 value String 可选的限定描述符,制定使用的事务管理器 propogation enum ...

  5. OpenCV:直线拟合——cv::fitLine()详解

    实现目的:有一系列的点,需要拟合出一条直线. cv::fitLine()的具体调用形式如下: void cv::fitLine( cv::InputArray points, // 二维点的数组或ve ...

  6. svn分支

    在svn上我们除过一般的保存文档外,对于开发source,可以使用 trunk(主线),branch(分线), tag(上线或测试用) 做分支应用开发. trunk上建立代码位置,存放代码. 点击Te ...

  7. 在执行bat脚本的时候打印日志

  8. ORM一对多查询对象

    正向查询: 取人民日报出版社出版的所有书籍 方式一: pub_obj = Publish.objects.filter(name='人民日报')[0] ret = Book.objects.filte ...

  9. Service的启动,绑定,绑定后通信,跨应用绑定,跨应用绑定后通信

    Service介绍: 与Acitivity平级的Android四大组件之一,对比Activity而言,就是没有交互界面,且可以一直在后台执行,只用于处理下载,I/O等长时间信息交流的任务. Servi ...

  10. AWK 知识库

    awk 极客课程 <AWK 编程语言>1 <AWK 编程语言>2 <AWK程序设计语言>https://github.com/wuzhouhui/awk http: ...