解决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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 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危险函数(disable_functions)
2012/02/23 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python帮你识破双11的套路
2019/11/11 Python
Python错误的处理方法
2020/06/23 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL