解决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构建JSON格式字符串实现步骤
Mar 22 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
培养自己的php编码规范
2015/09/28 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
2015年世界无烟日活动总结
2015/02/10 职场文书
十月围城观后感
2015/06/08 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫