解决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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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桌面中心(二) 数据库写入
2007/03/11 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
详解Python中for循环的使用
2015/04/14 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
哪些是python中web开发框架
2020/06/17 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
建筑工地标语
2014/06/18 职场文书
父亲婚礼答谢词
2015/01/04 职场文书