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 普通函数中的 ...
随机推荐
- (二十四)JSP标签之基本标签(<jsp:标签名>)
一.常用标签 1.1 jsp中标签一共有8中,其中常用的有6中,本文将介绍这6种常用的标签. 1.2 6种标签 1. <jsp:include> <jsp:include>标签 ...
- (三)XML基础(3):Xpath
五.XPath:快速定位到节点 5.1 简介 5.2 语法 5.3 案例 XPath对有命名空间的xml文件和没有命名空间的xml定位节点的方法是不一样的,所以再对不同的xml需要进行不同的处理. 使 ...
- Java Web 深入分析(2) DNS
DNS :Domain Name System,域名系统 ,通俗的来说需要把我们日常见到的URL 网址信息解析成IP地址,例如 DNS域名解析过程 用户浏览器:用户在浏览器地址栏输入域名进行访问,浏览 ...
- 再谈.NET委托(delegate、Func<>)
为了演示委托,我们先来定义一个方法:public static bool IsTen(int i){ return i == 10 ? true : false;} 如果要用自定义委托,则需要声 ...
- C# 控制台日历 region分区编写思想
已知道1900-1-1为星期一. 模块分区 //获取用户的正确输入并分别保存到变量year和month中 //声明一个用于保存空白和当月日期数的集合dates //遍历输出集合dates using ...
- MySQL5.7.28免安装版配置
下载 安装配置 问题及解决方案 一.下载 找到你要的版本点击“looking for the latest GA version?”切换,我这个安装的是5.7.28,然后往下拉: 找到免安装的压缩包: ...
- leetcode-100. Same Tree · Tree + DFS + Queue
题面 对比两棵二叉树是否相同,返回结果. 思路 1. 递归解决DFS 首先判断根节点,如果都空,返回true: 如果一空一不空,返回false: 如果都不空,判断两节点值是否相同,若不同,返回fals ...
- element-ui组件,全选树节点,新增数据子节点数据,出现回填问题
案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...
- 阿里Java架构师打包 FatJar 方法小结
在函数计算(Aliyun FC)中发布一个 Java 函数,往往需要将函数打包成一个 all-in-one 的 zip 包或者 jar 包.Java 中这种打包 all-in-one 的技术常称之为 ...
- MacOS文本编辑无法打不开GB18030
不要直接双击打开 而是 打开sublime text或者其他文本编辑后,从软件里面的open选型打开