记录 - 在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

Caizhenhao 发布于2019-08-23 16:50 / 2216人阅读

摘要：如果在两个页面之间来回跳转跳转时间小于定时器的间隔时间时，也会出现重复创建的情况。原因当我们刷新页面时，会将当前页面之前创建的以及其他定时器都清除掉但是仅仅是路由切换是不会清除的。

问题:从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时，也会出现重复创建setTimeout的情况。

原因:当我们刷新页面时，会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。

解决：具体代码：`

data () {
    return {
      overtimer: null
    }
}，
methods: {
    stoptime () {
      clearTimeout(this.overtimer);
    }
}，
created () {
    this.overtimer = setTimeout(() => {
        this.$Message.error("读取卡片超时");
     }, 10000)
    this.$once("hook:beforeDestroy", () => {            
      clearInterval(this.overtimer);
      this.overtimer = null;
    })
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103366.html

Vue 实践过程中的几个问题

摘要：前言本篇是我在使用过程中，遇到的几个小问题和之前不了解的东西，记录下来，希望能够帮助各位踩坑。小结上面就是我分享的几个小问题，希望大家看了能够有所收获另明年准备去上海，如果小伙伴的公司有坑，可以联系一下我。前言本篇是我在使用vue过程中，遇到的几个小问题和之前不了解的东西，记录下来，希望能够帮助各位踩坑。如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家。本文首发于我的个...

DevTalking 2019-08-22 14:01 评论0 收藏0
VUE使用中踩过的坑

摘要：前言如今可谓是一匹黑马数已居第一位前端开发对于的使用已经越来越多，它的优点就不做介绍了本篇是我对使用过程中以及对一些社区朋友提问我的问题中做的一些总结帮助大家踩坑。随后的重新渲染，元素组件及其所有的子节点将被视为静态内容并跳过。前言 vue如今可谓是一匹黑马,github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了,本篇是我对vue使用过程中以及...

big_cat 2019-08-22 14:04 评论0 收藏0
初学者可能不知道的vue技巧

摘要：前言大家好，这里是平头哥联盟，我是首席甩锅官老金，今天给大家分享的，一些日常中神秘而又简单的的实用小技巧，以及我在我司项目中实用的总结和坑，跟大家一起分享，希望能给其他攻城狮带来些许便利，如有理解错误，请纠正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，这里是@IT·平头哥联盟，我是首席甩锅官...

scola666 2019-08-29 17:01 评论0 收藏0
初学者可能不知道的vue技巧

摘要：前言大家好，这里是平头哥联盟，我是首席甩锅官老金，今天给大家分享的，一些日常中神秘而又简单的的实用小技巧，以及我在我司项目中实用的总结和坑，跟大家一起分享，希望能给其他攻城狮带来些许便利，如有理解错误，请纠正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，这里是@IT·平头哥联盟，我是首席甩锅官...

Drummor 2019-08-02 11:44 评论0 收藏0
初学者可能不知道的vue技巧

摘要：前言大家好，这里是平头哥联盟，我是首席甩锅官老金，今天给大家分享的，一些日常中神秘而又简单的的实用小技巧，以及我在我司项目中实用的总结和坑，跟大家一起分享，希望能给其他攻城狮带来些许便利，如有理解错误，请纠正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，这里是@IT·平头哥联盟，我是首席甩锅官...

baoxl 2019-08-23 12:25 评论0 收藏0