解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题


Posted in Javascript onJuly 21, 2020

问题:

从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况。

原因:

当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。

data () {
  return {
   ct: null
  }
},
methods: {
 start() {
 this.ct= setTimeout( () => {that.countdown(end)}, 1000)
 }
 end() {
 clearTimeout(this.ct); //清除
 }
}

setInterval()计时也需要clearInterval()来清除

补充知识:小记VUE下setTimeOut和setInterval遇到的问题

相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行

需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。

说一下最近开发中遇到的问题,我是用vue开发的,顺便记录这个错误。

我需要轮询接口,所以使用setInterval。

// 我是想没2秒执行一次myFunc这个函数。
setInterval(this.myFunc(),2000)
//某个函数
myFunc () {
  console.log(123)
}

但实际的运行结果是,只执行了一遍,并没有循环执行。

原因是setInterval接受两个参数,第一个为要执行的函数,第二个为时间(毫秒)。

这里我犯的错误是,我写的是一个函数的执行this.myFunc() 因为加了()是一个执行,而不是个函数。

于是我又改成这样写了,在写个匿名函数,函数体是我要执行的。

setInterval(function () {
 this.myFunc()
},2000)
//某个函数
myFunc () {
  console.log(123)
}

理论上这样是没问题的,会每2秒执行一次this.myFunc(),但却报错了。

原因是 老生常谈的javaScript 的this 的问题。

因为用的一个function(){} 这里的 独立的作用域 this指向了全局(这里是window)而且window里没有myFunc这个函数,所报了错。

用过vue的朋友应该,基本vue中都是this.XXX这样写。这里的this是Vue对象。

所以为了使this正确指向vue,我用了ES6的尖头函数。

最终

setInterval(() => {
 this.myFunc()
},2000)
//某个函数
myFunc () {
  console.log(123)
}

尖头函数因为它的特殊性,它的this指向它外层的对象。

其实主要说的是第二个问题,第一个属于对函数不熟悉,第二个则是VUE,ES6,this指向综合的问题。

以上这篇解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
JavaScript undefined及null区别实例解析
Jul 21 #Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 #Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 #Javascript
vue 实现tab切换保持数据状态
Jul 21 #Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php实现网站插件机制的方法
2009/11/10 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
论文指导教师评语
2014/04/28 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
新年晚会开场白
2015/05/29 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书