定时器如果不手动清除,只会在离开当前页面或者F5刷新后才会清除。由于vue项目是SPA应用,离开当前组件后并不会清除定时器,所以需要我们手动去清除定时器。但当我们将清除定时器clearInterval或clearTimeout写入组件的生命周期destroyed内部时并不能清除定时器,直接写window.clearXXX也并不是很好使。网上查了好久,有前辈给出需要将清除定时器写在路由钩子函数里,注意这里的路由函数需要写在当前组件下。下面给代码:

这里注意我是使用setTimeout内调用setTimeout来实现setInterval的效果(好处自己百度去)。红色框的变量不用管等会再说。上面是定时器的代码,下面给出离开组件时清除定时器的代码

这里的isDestroyed变量在离开组件前设为true,清除定时器。

VUE清除组件内部定时器的更多相关文章

  1. Vue清除所有JS定时器

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

  2. Vue匿名组件使用keep-alive后动态清除缓存

    在使用Vue开发管理系统项目的时候,为了保存页面的浏览状态,我们可以使用内置组件keep-alive来缓存组件内部状态,避免重新渲染. <keep-alive> <router-vi ...

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

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

  4. 分离vue组件内部css

    当我们使用vue组件的时候,使用webpack打包的时候,默认会把vue组件内部的css打包到页面上,但是打包到页面上很丑陋,所以我们希望可以把vue组件内部的css抽离到css文件中,使用vue-s ...

  5. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  6. vue组件内部引入远程js文件

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export def ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  9. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

随机推荐

  1. Excel读取导入数据库碰到的问题

    1.未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序. 下载并安装驱动:http://download.microsoft.com/download/7/0/3/703 ...

  2. 【UML】概述以及面向对象技术总结

    导读:结束了软工文档后,就开始了UML的学习,不管学习什么,都要先从整体上去把握,然后再从细节上去分析理解.在视频的开头,就对UML进行了概述.然后接着讲了面向对象技术,用例图,类图和包图等.看着软工 ...

  3. 使用python实现简单的爬虫

    python爬虫的简单实现 开发环境的配置 python环境的安装 编辑器的安装 爬虫的实现 包的安装 简单爬虫的初步实现 将数据写入到数据库-简单的数据清洗-数据库的连接-数据写入到数据库 开发环境 ...

  4. nginx的正则

    ~      为区分大小写的匹配. ~*     不区分大小写的匹配(匹配firefox的正则同时匹配FireFox). !~     不匹配的 !~*    不匹配的 .     匹配除换行符以外的 ...

  5. Luogu【P3609】蹄子剪刀布(DP+滚动数组)

    题目链接 (突然高兴 又一次瞬间想出转移方程并一遍A掉!!233333(虽然从二叉苹果树那题开始我就发现我的方程好像跟别人不大一样 (所以这样就可以名正言顺的水题解了 设f[i][j][k]表示考虑F ...

  6. Ignite集成Spark之IgniteDataFrames

    下面简要地回顾一下在第一篇文章中所谈到的内容. Ignite是一个分布式的内存数据库.缓存和处理平台,为事务型.分析型和流式负载而设计,在保证扩展性的前提下提供了内存级的性能. Spark是一个流式数 ...

  7. HDU 1071 The area ——微积分

    [题目分析] 求二次函数和一次函数围成的面积. 先解方程求出一次函数和二次函数. 然后积分. 现在还是不会积分. [代码] #include <cstdio> #include <c ...

  8. 图表控件Anychart常见问题

    AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...

  9. excel批量导入数据库SQL server

    思路: 第一是文件上传,可以参照Jakarta的FileUpload组件,用普通的Post也就行了.第二是Excel解析,用JSL或者POI都行第三是数据保存,这个应该简单吧,一个循环,一行对应一条数 ...

  10. 洛谷—— P2656 采蘑菇

    https://www.luogu.org/problem/show?pid=2656 题目描述 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连 ...