浅谈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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
全面了解js中的script标签
Jul 04 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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
php UBB 解析实现代码
2011/11/27 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python简单生成随机姓名的方法示例
2017/12/27 Python
python实现教务管理系统
2018/03/12 Python
python配置grpc环境
2019/01/01 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
社区志愿者心得体会
2014/01/03 职场文书
会计系毕业生求职信
2014/05/28 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
优质护理服务心得体会
2016/01/22 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
golang slice元素去重操作
2021/04/30 Golang
Tomcat配置访问日志和线程数
2022/05/06 Servers