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 普通函数中的 ...
随机推荐
- Asp.net core 学习笔记 ( ef core transaction scope & change level )
ef core 有 unit of work 的概念,当我们 save change 时会自动使用 transaction 确保更新的一致性. 隔离级别是默认的 read committed 不允许脏 ...
- spring整合quartz框架
spring整合quartz: 网上也有很多教程,好多都是基于配置方式,我们使用当然怎么简单就怎么用,所以这里介绍基于注解方式整合quartz.前提:你需要有一个能运行的web项目. 1.引依赖: & ...
- 【转载】在使用JDBC连接MySql时报错:You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize time zone support
在使用JDBC连接MySql时报错:You must configure either the server or JDBC driver (via the serverTimezone config ...
- LeetCode 1047. Remove All Adjacent Duplicates In String
1047. Remove All Adjacent Duplicates In String(删除字符串中的所有相邻重复项) 链接:https://leetcode-cn.com/problems/r ...
- JDBC 复习2 存取mysql 大数据
大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据 mysql的大数据分为2种 blob 和 text ,没有cl ...
- findstr 命令使用
findstr 命令使用 find /? 在文件中搜索字符串. FIND [/V] [/C] [/N] [/I] [/OFF[LINE]] "string" [[drive:][p ...
- undefined reference to `udev_device_get_action'
/usr/lib/gcc/i686-linux-gnu/4.8/../../../i386-linux-gnu/libusb-1.0.a(libusb_1_0_la-linux_udev.o): In ...
- linux——运维基础,与常用命令
1 运维概述 1 什么是运维 服务器的运行维护 2 名词 IDC(互联网数据中心) 3 监控软件 zabbix(用的最多), nagios, cactti 4 常用的linux操作系统 1 CentO ...
- css Cascading Style Sheet 层叠样式表
作用 :实现网页布局,美化页面元素 CSS 在文档中的三种方式 1 行内样式/内联样式 特点:在具体的html标签中引入css 代码 语法: 所有的html标签都具有一个style属性,属性值就可以使 ...
- linux同步onedrive文件
定时任务 # 开机自启动 @reboot /root/system/start.sh # 从零点开始每小时执行一次任务 0 0 0/1 * * ? nohup rclone sync onedrive ...