解决vue使用setTimeout,离开当前路由setTimeout未销毁的问题_如果页面被销毁时,监听事件没有移除会怎么样 - CSDN文库

39 浏览量更新于2023-05-11 评论收藏 54KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

问题问题

主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题，具有很好的参考价值，希望对大

家有所帮助。一起跟随小编过来看看吧

问题：问题：

从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定

时器的间隔时间时，也会出现重复创建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对象。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38742453

粉丝: 15
资源: 945

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈