定时器如果不手动清除,只会在离开当前页面或者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. 深入java集合系列

    http://www.cnblogs.com/ITtangtang/p/3948765.html 写的很赞 需要时常复习.

  2. 【14】javascript有哪几种数据类型

    javascript有哪几种数据类型 六种基本数据类型 undefined null string boolean number symbol(ES6) 一种引用类型 Object **

  3. Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM

    你已经了解了HTML标记(也称为结构),而且知道了CSS样式(也称为表示),剩下的就是Javascript(也称为行为). JavaScript的工作方式 1. 编写 你创建HTML标记和JavaSc ...

  4. Codeforces 545E. Paths and Trees[最短路+贪心]

    [题目大意] 题目将从某点出发的所有最短路方案中,选择边权和最小的最短路方案,称为最短生成树. 题目要求一颗最短生成树,输出总边权和与选取边的编号.[题意分析] 比如下面的数据: 5 5 1 2 2 ...

  5. [luoguP2325] [SCOI2005]王室联邦(树分块乱搞)

    传送门 想了半小时,没什么思路.. 看了题解,是个叫做树分块的奇奇怪怪的操作.. 题解 树分块的研究 #include <cstdio> #include <cstring> ...

  6. 洛谷 [P3224] 永无乡

    Treap 的合并 首先感谢 @Capella 的DeBug 其次,这是由一个 & 号引发的血案 注意对于所有修改操作都要 & Treap的合并, 启发式合并,对于每一个节点都 ins ...

  7. ZOJ - 3816 Generalized Palindromic Number dfs

    Generalized Palindromic Number Time Limit: 2 Seconds                                     Memory Limi ...

  8. R语言入门---杂记(一)---R的常用函数

    1.nchar():查看字符串长度. 2.rev(): 给你的数据翻个个 3.sort():给你数据排个序(默认从小到大依次排列) 4.runif():产生均匀分布的随机数 #runif

  9. 如何选择 IT 技术书籍

    ★第1招:看网上评论 首先,上一些权威的图书网站,看看大伙儿的评价如何(要相信群众的眼睛是雪亮的).对于英文书籍,我一般上亚马逊网站去看看:中文书籍则上豆瓣网.这两个网站都提供星级评分,一般 > ...

  10. codevs——1501 二叉树最大宽度和高度

    1501 二叉树最大宽度和高度  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 给出一个二叉树,输出它的 ...