当前位置: 首页 > 编程笔记 >

解决vue组件销毁之后计时器继续执行的问题

路伟
2023-03-14
本文向大家介绍解决vue组件销毁之后计时器继续执行的问题,包括了解决vue组件销毁之后计时器继续执行的问题的使用技巧和注意事项,需要的朋友参考一下

直接上代码,以下

window.setTimeout(function(){
 if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁
  return;
 }
 window.location.href = "/serverMonitor?t="+ new Date().getTime();
},5000)

很粗暴的方法,在执行之前看是否被销毁就行,

第二种方法,调用路由组件内的钩子函数beforeRouteLeave

beforeRouteLeave(to,from,next){
clearTimeout(window.timer);
next();
}

补充知识:vue销毁时事件,created和mounted&&activated的区别

我就废话不多说了,大家还是直接看代码吧~

// 关闭当前页面就会销毁监听事件(checkpay)
destroyed() {
 clearInterval(this.checkpay)
}
created()在创建vue对象时,在html渲染之前就触发;但是注意created()只会触发一次; mounted()在html渲染完成之后才会执行的;
 activated()进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

以上这篇解决vue组件销毁之后计时器继续执行的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue组件里的定时器要怎么销毁?相关面试题,主要包含被问及vue组件里的定时器要怎么销毁?时的应答技巧和注意事项,需要的朋友参考一下 const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy',

  • 本文向大家介绍vue 组件销毁并重置的实现,包括了vue 组件销毁并重置的实现的使用技巧和注意事项,需要的朋友参考一下 方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题 方法2 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 在一些请求中,我们会做一些日志的推送、用户数据的统计等和返回给终端数据无关的操作。而这些操作,即使你用异步非阻塞的方式,在终端看来,也是会影响速度的。这个和我们的原则:终端请求,需要用最快的速度返回给终端,是冲突的。 这时候,最理想的是,获取完给终端返回的数据后,就断开连接,后面的日志和统计等动作,在断开连接后,后台继续完成即可。 怎么做到呢?我们先看其中的一种方法: local response

  • 据我所知,promise是可以解析()或拒绝()的东西,但我惊讶地发现,promise中的代码在调用解析或拒绝后仍继续执行。 我认为resolve或reject是exit或return的异步友好版本,它将停止所有立即的函数执行。 有人能解释一下为什么下面的示例有时在解析调用后显示console.log的背后思想吗: 杰斯宾

  • 我制作了一个程序,要求用户输入5位数字,然后程序将查找这些数字的总和。我想知道我怎样才能使程序在计算一次之后一遍又一遍地要求一个数字。我希望用户再试一次,直到他自己想退出。

  • 本文向大家介绍解决vue 引入子组件报错的问题,包括了解决vue 引入子组件报错的问题的使用技巧和注意事项,需要的朋友参考一下 错误信息: 源码: 原因: vue里面不允许使用 Html已有的标签作为自定义标签 修改方案: 修复结果: ok! 以上这篇解决vue 引入子组件报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。