浅谈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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
详解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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python 修改本地网络配置的方法
2019/08/14 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python2与Python3的区别详解
2020/02/09 Python
浅析Python requests 模块
2020/10/09 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
生日派对邀请函
2014/01/13 职场文书
机械专业求职信范文
2014/07/15 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技