浅谈vue 组件中的setInterval方法和window的不同


Posted in Javascript onJuly 30, 2020

vue组件中,this指向实例,【实例中重写了setInterval等一整套方法】。所以,千万不能和 window 下挂载的方法混用

具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回【定时器对象】,当然该对象中包含一个_id的私有属性

因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法

vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法

//正确的用法
mounted() {
 // 如果不加 window ,则会使用 vue实例的方法,将无法清除定时器
 this.timer = window.setInterval(() => {
  this.date = new Date();
 }, 2000);
 console.log(this.timer);//number
},
methods: {
 clearTimer() {
  window.clearInterval(this.timer);
  this.timer = null;
 }
}

补充知识:vue 切换页面 setInterval

vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。

mounted(){
   clearInterval(this.timer);
   this.setTimer();
  },
  destroyed(){
  clearInterval(this.timer)
 }

以上这篇浅谈vue 组件中的setInterval方法和window的不同就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
解析Vue.js中的组件
Feb 02 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue项目中使用多选框的实例代码
Jul 22 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php格式化日期实例分析
2014/11/12 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
JavaScript 调试器简介
2009/02/21 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
在vue中使用setInterval的方法示例
2019/04/16 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python实现查询苹果手机维修进度
2015/03/16 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
英文产品推荐信
2015/03/27 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL