vue 清除定时器失效 clearInterval

最新推荐文章于 2024-04-05 14:30:24 发布
最新推荐文章于 2024-04-05 14:30:24 发布
阅读量953 收藏 4
点赞数
分类专栏： vue 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elizebeth6/article/details/120459162
版权
在开发视频播放功能时，使用Vue遇到定时器清除失效的挑战。通过心跳监听来更新进度条，发现在尝试使用`clearInterval`停止定时器时不起作用。经搜索，解决方案是将定时器引用绑定到`window`对象上，从而确保定时器能够被正确清除。
摘要由CSDN通过智能技术生成

最近在写视频播放相关内容，需要自己写进度条
想着做个心跳监听当前的进度条
发现清楚定时器的时候失效

搜了一下
解决办法就是挂载到window上

	this.timer = window.setInterval(() => {
   
        this.onPlayerTimeupdate();
    }, 300
最低0.47元/天 解锁文章
elizebeth6
关注
专栏目录
vue中页面缓存后destroyed失效，如何关闭定时器
lifangfang0607的博客
01-07 2809
场景 页面中设置了定时器，如果组件销毁是没有关闭定时器，他还会一直执行，会非常耗性能，所以需要及时关闭定时器。 关闭定时器 vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。 代码 没有缓存页面： destroyed(){ clearInterval(this.timer) } 缓存过的页面： // 开启定时
Vue2中 定时器 clearInterval()，结束定时器无效，已解决！
学而不思则罔,思而不学则殆
11-01 4342
Vue中 定时器 clearInterval()，结束定时器无效，已解决！
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
10-16
最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法，感兴趣的朋友一起看看吧
clearInterval不起作用,vue中定时器无法关闭
abdke_123的博客
04-11 3004
在vue中，设置定时器，使用clearInterval()不起效果，这是因为经过页面切换，设置的定时器已不是同一个，再使用clearInterval只对当前页面的定时器清除，但之前页面定义的无法清除。vue离开页面时销毁定时器。vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。
解决vue后台管理系统 离开页面清除定时器失效问题
weixin_68531033的博客
03-15 1069
在写后台时，习惯性设置一个主页面（也就是包含头部、侧边导航栏、底部、中心内容）将子页面都放到中心内容content里。在子页面设置定时器时，切换其他子页面并不是真正的离开了页面，实质上还是在主页面上，所以在destroyed(){}设置清除定时器并不会生效。解决方法：在 beforeRouteLeave (to, from, next) {} 离开路由的时候清除。必须添加next（），否则切换侧标导航栏时 切换路由会失效，导致不能切换页面。本质上是：清除子组件的定时器。
vue 路由跳转清除定时器不起作用
u013195452的专栏
01-27 1549
在一个页面中定时器调用一个接口，切换别的路由时候定时器需要清空。是在mounted 和beforeDestroy做的不起用 1.data中定义timers:null 2.使用定时器调接口，摧毁时候清空定时器不起作用 mounted () { this.timers = setInterval(() => { this.loadData() }, 30000) }, beforeDestroy () { clearInterval(this.timers) .
vue项目中清除定时器（清除定时器不成功）
sinat_41694829的博客
05-19 3634
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹： <template> <div> <keep-alive> <router-view /> </keep-alive> </div> </template> 在data中： data () { return { timer: null // 定
vue setInterval 定时器失效的解决方式
10-15
综上所述，解决Vue `setInterval`定时器失效的问题主要在于理解和充分利用Vue的组件生命周期，以及正确使用路由守卫。通过合理管理和清理定时器，我们可以避免资源浪费和潜在的错误，提高应用的性能和稳定性。同时，...
上面代码清除vue3定时器失效
06-13
如果上面的代码清除定时器失效，可能是因为在 Vue3 中，`beforeUnmount` 生命周期被重命名为 `beforeUnmounted` 生命周期，所以应该使用 `beforeUnmounted` 生命周期来清除定时器。 以下是修改后的示例代码： ``` ...
vue中clearInterval 不生效，不起作用
YUNAN_ZHANG的专栏
02-12 4996
登录超时后，转到登录界面，因为Home.vue组件在keep-alive中，没有销毁，里面的计时器也没有销毁。 导致在登录界面仍然刷新后台数据。 尝试在跳转到登录路由的时候，clearInterval 计时器。但是不起作用。怀疑计时器重复启动了。但是判断为空之后再启动计时器，仍然不起作用。 最后发现Home.vue中有这么一句：import { setInterval} from "tim...
记录一下前端定时器清除失效的问题
最新发布
axbhealj的博客
04-05 960
记录一下前端定时器清除失效的问题
【前端】Vue使用clearInterval（）无效不起作用
sunshine641的博客
03-11 5828
在Vue使用计时器后 ，clearInterval（）不起作用，并没有消除计时器 搜索了下 ，大概总结一下原因： 解决办法： 不要直接使用setInterval(fun,5000) 和 clearInterval() 会出现clearInterval 失效的问题。 建议采用window.setInterval(fun,5000) 和window.clearInterval() 参考链接： 原因 解决 ...
vue clearInterval无效不起作用，函数不生效
weixin_40228600的博客
11-12 1578
setInterval()： 指定间隔毫秒数不停地执行指定的代码。 clearInterval()：用于停止 setInterval() 方法执行的代码,而不是具体的方法，是setInterval的引用。 只有两者规范的使用，才能生效，具体代码如下： <script> export default { data() { return { timeObject: null }; }, created() { //调用定时器 this.
vue定时器清除不掉，导致功能频繁执行问题
热门推荐
来一颗砂糖橘
04-21 2万+
前端Vue项目中定时器清除问题
vue中clearInterval无效~解决方法
weixin_40918145的博客
11-19 1839
vue页面中不要直接使用setInterval(fun,5000) 和 clearInterval() 会出现clearInterval 失效的问题。 建议采用window.setInterval(fun,5000) 和window.clearInterval() clearInterval失效问题就可以解决，具体原因不明 ...
Vue中通过v-if控制的页面存在定时器，点击菜单栏切换页面，定时器清除没有生效
qq_42453751的博客
07-26 803
created()、activated()、deactivated()，vue清除定时器不生效 vue无法清除定时器
Vue2中clearInterval()不生效问题的解决方法
小龙狗的博客
10-10 1808
Vue2中clearInterval()不生效问题的解决方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值