两种清除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的清除的更多相关文章

  1. [Vue] vue中setInterval的问题

    vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...

  2. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

  3. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

  4. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  5. 在Vue中的load或ready的加载时机

    在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...

  6. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  7. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

  8. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  9. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

随机推荐

  1. Asp.net core 学习笔记 ( ef core transaction scope & change level )

    ef core 有 unit of work 的概念,当我们 save change 时会自动使用 transaction 确保更新的一致性. 隔离级别是默认的 read committed 不允许脏 ...

  2. spring整合quartz框架

    spring整合quartz: 网上也有很多教程,好多都是基于配置方式,我们使用当然怎么简单就怎么用,所以这里介绍基于注解方式整合quartz.前提:你需要有一个能运行的web项目. 1.引依赖: & ...

  3. 【转载】在使用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 ...

  4. LeetCode 1047. Remove All Adjacent Duplicates In String

    1047. Remove All Adjacent Duplicates In String(删除字符串中的所有相邻重复项) 链接:https://leetcode-cn.com/problems/r ...

  5. JDBC 复习2 存取mysql 大数据

    大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据 mysql的大数据分为2种 blob 和 text ,没有cl ...

  6. findstr 命令使用

    findstr 命令使用 find /? 在文件中搜索字符串. FIND [/V] [/C] [/N] [/I] [/OFF[LINE]] "string" [[drive:][p ...

  7. 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 ...

  8. linux——运维基础,与常用命令

    1 运维概述 1 什么是运维 服务器的运行维护 2 名词 IDC(互联网数据中心) 3 监控软件 zabbix(用的最多), nagios, cactti 4 常用的linux操作系统 1 CentO ...

  9. css Cascading Style Sheet 层叠样式表

    作用 :实现网页布局,美化页面元素 CSS 在文档中的三种方式 1 行内样式/内联样式 特点:在具体的html标签中引入css 代码 语法: 所有的html标签都具有一个style属性,属性值就可以使 ...

  10. linux同步onedrive文件

    定时任务 # 开机自启动 @reboot /root/system/start.sh # 从零点开始每小时执行一次任务 0 0 0/1 * * ? nohup rclone sync onedrive ...