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 普通函数中的 ...
随机推荐
- SAS学习笔记37 宏程序中parmbuff选项
该选项用于指定宏可以接受可变参数列表,而且参数值保存在SYSPBUFF宏变量中.parmbuff的参数价值,其实就是每次执行宏程序时,可以指定不同数量的参数值,这些宏参数被保存在&syspbu ...
- Maven配置、使用
一:什么是Maven Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven提供了开发人员构建一个完整的生命周期框架,开发人员可以自动完成 ...
- Spring Boot 项目集成 Alibaba Druid
Druid 是一个非常好用的数据库连接池,但是他的好并不止体现在作为一个连接池加快数据访问性能上和连接管理上,他带有一个强大的监控工具:Druid Monitor.不仅可以监控数据源和慢查询,还可以监 ...
- Angular 惰性路由
根路由上的一个 loadChildren 属性,设置为一个字符串.这样就是惰性路由了. angular6 这样写:loadChildren: './background-check/backgroun ...
- java jdk1.8 API
里面有 中英文 jdk 1.8 API 还有 jdk1.6 和1.7 英文 API 链接:https://pan.baidu.com/s/1tchABVX7htJCaO3quENP1g提取码:y ...
- ajax请求的五个步骤
创建XMLHttpRequest异步对象 var xhr = new XMLHttpRequest() 设置回调函数 xhr.onreadystatechange = callback 使用open方 ...
- Java基础加强-反射机制
反射的基石 -> Class 类(字节码)/*只要是在源程序中出现的类型,都要各自的Class实例对象,例如:int,int[],void*/如何得到各个字节码对应的实例对象(Class类型) ...
- ASE19团队项目beta阶段Backend组 scrum7 记录
本次会议于12月13日,19:30在微软北京西二号楼sky garden召开,持续10分钟. 与会人员:Hao Wang, Lihao Ran, Xin Kang 请假人员:Zhikai Chen 每 ...
- 让你在上司眼里“更靠谱”的六个建议
"勇于创新"是职场一大谎言 晋升选择题 你有两个下属,你想从他们中挑一个升职,你觉得哪一个更适合? 员工A: 优点:奉行"80%的精力维护20%的重要客户"的原 ...
- win server服务器 关闭危险端口 135,137,138,139,445的方法
Windows默认开放135.137.138.139和445五个端口,都与文件共享和打印机共享有关的,若机器连接网络后会在用户不知道的情况下泄露本机部分信息,这样会给用户带来一部分危险,所以我们在工作 ...