在项目中,我们经常会使用到定时器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. fb发布打包外部资源

    将资源放在src文件夹下面即可 然后在打包那就会看到资源,勾上即可

  2. Ajax技术剖析

    Ajax的全称是Asynchronous JavaScript and XML,是JS的特有功能,它作用是异步JS数据交互,即在不进行页面刷新的情况下进行部分数据的获取,性能较高.值得注意的是,仅有A ...

  3. 03_JSX理解和使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. iOS pods编译原理

    首先看一下Podfile文件下面这行 use_frameworks! 这行的意思是Pod工程中的target是否编译成framework的形式,加上这行Pod工程中的target会编译成framewo ...

  5. HBASE小结--待续使用

    构建在HDFS之上的分布式,面向列的存储系统,使用zookeeper做协同服务,在需要实时读写和随机访问超大规模数据集的时候使用 缺点:非关系型,不支持SQL,数据类型单一(字符串,无类型),之支持单 ...

  6. python multithread task_done

    queue.task_done()用在queue消费者中,在queue.get()调用之后调用queue.task_done()用于通知队列已经完成了工作,使queue.join()知道任务已经完成. ...

  7. sql中case when语句的使用

    case when语句有两种格式:简单case函数和搜索case函数. --简单Case函数CASE sexWHEN '1' THEN '男'WHEN '2' THEN '女'ELSE '其他' EN ...

  8. 【387】Python format 格式化函数

    参考:Python format 格式化函数 # 保留小数点后两位 f'{3.1415926:.2f}' # 带符号保留小数点后两位 f'{3.1415926:+.2f}' f'{-1:+.2f}' ...

  9. android填满手机内存的方法

    1. 进行临界测试,手机盘空间存满的条件下应用会有何表现:通常手动添加大文件但是还是不够,通过如下 2. 使用adb命令完成:通过如下 adb 命令在 /mnt/sdcard/ 目录下产生一个名为 b ...

  10. Android 操作UI线程的一些方法

    我们经常会在后台线程中去做一些耗时的操作,比如去网络取数据.但是当数据取回来,需要显示到页面上的时候,会遇到一些小麻烦,因为我们都知道,android的UI页面是不允许在其他线程直接操作的.下面总结4 ...