浅谈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 相关文章推荐
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
原生js开发的日历插件
Feb 04 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
微信小程序实现锚点跳转
Nov 23 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中取得URL的根域名的代码
2011/03/23 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
javascript中new关键字详解
2015/12/14 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
python的unittest测试类代码实例
2017/12/07 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python 内置函数汇总详解
2019/09/16 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
测量工程专业求职信
2014/02/24 职场文书
协议书与合同的区别
2014/04/18 职场文书
公司任命书范本
2014/06/04 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
营销经理工作检讨书
2014/11/03 职场文书
公司财务部岗位职责
2015/04/14 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android