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

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

这里的isDestroyed变量在离开组件前设为true,清除定时器。
VUE清除组件内部定时器的更多相关文章
- Vue清除所有JS定时器
Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...
- Vue匿名组件使用keep-alive后动态清除缓存
在使用Vue开发管理系统项目的时候,为了保存页面的浏览状态,我们可以使用内置组件keep-alive来缓存组件内部状态,避免重新渲染. <keep-alive> <router-vi ...
- 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题
2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...
- 分离vue组件内部css
当我们使用vue组件的时候,使用webpack打包的时候,默认会把vue组件内部的css打包到页面上,但是打包到页面上很丑陋,所以我们希望可以把vue组件内部的css抽离到css文件中,使用vue-s ...
- upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量
upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...
- vue组件内部引入远程js文件
之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export def ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- 15,re正则表达式
判断手机号是否合法. phone_number = input('请输入手机号:') if re.match('^(13|14|15|18)[0-9]{9}$',phone_number): prin ...
- Eclipse截取android报错log
Eclipse截取android报错log: 1.前提条件:已安装eclipse 2. LogCat界面设置: Logcat是Android 编程中一个命令行工具,可以用于得到程序的 log 信息,可 ...
- web项目架构
二
- 多线程下,多次操作数据库报错,There is already an open DataReader associated with this Command which must be closed first.
原文:https://www.cnblogs.com/sdusrz/p/4433108.html 执行SqlDataReader.Read之后,如果还想用另一个SqlCommand执行Insert或者 ...
- Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)
昨晚打得小号,虽然很菜,可是还是涨了些rating A. Arpa and a research in Mexican wave time limit per test 1 second memory ...
- 【JavaScript 14—学习总结】:从小事做起
导读:花了将近两个月,JavaScript的学习视频算是做完了.里面的例子,都敲过一遍,但有少数的几个就是实现不了,比如:百度分享侧栏随着滚动条移动:菜单切换只对第一个起作用等,也就先放着了.现在,就 ...
- BZOJ4446 [Scoi2015]小凸玩密室 【树形Dp】
题目 小凸和小方相约玩密室逃脱,这个密室是一棵有n个节点的完全二叉树,每个节点有一个灯泡.点亮所有灯 泡即可逃出密室.每个灯泡有个权值Ai,每条边也有个权值bi.点亮第1个灯泡不需要花费,之后每点亮4 ...
- 算法复习——差分约束(ssoi种树)
题目: 题目描述 为了绿化乡村,H 村积极响应号召,开始种树了. H 村里有 n 幢房屋,这些屋子的排列顺序很有特点,在一条直线上.于是方便起见,我们给它们标上 1-n .树就种在房子前面的空地上. ...
- 【单调队列优化dp】uestc 594 我要长高
http://acm.uestc.edu.cn/#/problem/show/594 [AC] #include<bits/stdc++.h> using namespace std; t ...
- Linux(14):集群架构进阶 --- CentOS 7
CentOS 7 CentOS 7 管理软件常用命令: vim /etc/selinux/config # 修改 SELINUX 开机自启动与否 setenforce 0 # 关闭 SELINUX g ...