vue中setInterval的清除
两种清除setInterval的方式:
方案一:
data() {
return {
timer: null // 定时器名称
}
},
mouted() {
this.timer = (() => {
// 某些操作
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
方案二(官方推荐):通过$once事件侦听器器在定义完定时器之后的位置来清除定时器。
方案一有两个潜在的问题:
- 它需要在这个组件实例中保存这个
timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。 - 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化地清理我们建立的所有东西。
mounted() {
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}
vue中setInterval的清除的更多相关文章
- [Vue] vue中setInterval的问题
vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- JS里设定延时:js中SetInterval与setTimeout用法
js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...
- vue 中的translation操作----动态值
在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...
- 在Vue中的load或ready的加载时机
在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue 中使用iconfont Unicode编码线上字体图标的流程
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
随机推荐
- matplotlib笔记1
散点图-scatter 散点图显示两组数据的值,每个点的坐标位置由变量的值决定由一组不连接的点完成,用于观察两种变量的相关 import numpy as np import matplotlib.p ...
- DMA存储器到存储器传输代码讲解
M to M:Flash to Sram,把内部flash的数据传输到内部SRAM(DRAM主要存放的是变量, flash 主要存放代码) M to P: SRAM to 串口,同时LED闪烁,演示D ...
- BZOJ4556 HEOI2016/TJOI2016字符串 (后缀树+主席树)
二分答案后相当于判断一个区间的后缀与某个后缀的最长公共前缀是否能>=ans.建出后缀树,在上述问题中后者所在节点向上倍增的跳至len>=ans的最高点,然后相当于查询子树中是否有该区间的节 ...
- Docker使用整理
Docker技术的基础: namespace,容器隔离的基础,保证A容器看不到B容器. 6个名空间:User,Mnt,Network,UTS,IPC,Pid cgroups,容器资源统计和隔离.主要用 ...
- java 框架-分布式文件管理系统1FastDFS
https://www.cnblogs.com/chiangchou/p/fastdfs.html
- 将用户赋予sudo权限:配置sudoers文件
xxx is not in the sudoers file.This incident will be reported.的解决方法 1.切换到root用户下,怎么切换就不用说了吧,不会的自己百 ...
- 干货,阿里P8浅谈对java线程池的理解(面试必备)
线程池的概念 线程池由任务队列和工作线程组成,它可以重用线程来避免线程创建的开销,在任务过多时通过排队避免创建过多线程来减少系统资源消耗和竞争,确保任务有序完成:ThreadPoolExecutor ...
- spider _其他库的简单操作与方法
PHP : 网络IO java : 代码笨重,代码量很大 C/C++ :虽然效率高,但是代码成型很慢 1 通用网络爬虫(搜索引擎引用,需要遵守robots协议) 1 搜索引擎如何获取一个新网站的 UR ...
- Computer Vision_33_SIFT:Speeded-Up Robust Features (SURF)——2006
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- 用python文件操作实现复制图片、视频
图片复制 打开源图片: f_src = open('1.jpg','rb') 读取图片内容并存储到content变量 content = f_src.read() 打开复制后的图片,没有则创建 f_c ...