华山资源网

解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
网络编程 2024/11/18 佚名
3 1

问题：

从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时，也会出现重复创建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未销毁的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com