在beforeDestroy生命周期清除定时器，定时器函数仍在执行解决

最新推荐文章于 2024-02-23 15:07:57 发布
最新推荐文章于 2024-02-23 15:07:57 发布
阅读量992 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIJIANGNIHAO123/article/details/130469806
版权
文章讨论了在Vue应用中遇到的一个问题，即在beforeDestroy生命周期钩子中使用clearInterval清除定时器后，定时器仍然在后台执行。作者发现即使离开页面，`this.getData`函数仍在持续发起请求。为了解决这个问题，文章提出了解决方案：将`this.getData`赋值为null，这样可以阻止函数执行，确保定时器在页面卸载后完全停止。
摘要由CSDN通过智能技术生成

先写结论：除了需要使用clearInterval清除定时器以外，还需要将定时器函数赋值为null；、

详解如下：

情景：该看板页面设有两个Interval定时器

 

问题出现：当我离开页面时，在vue生命周期函数beforeDestory中通过clearInterval清除定时器 ；退出页面时，定时器应该已经不再执行

 然而，即便退出页面，定时器依旧执行（this.getData依然在发起请求获取数据）

解决：给this.getData赋值为null即可，代码如下

 

江--
关注
初识Vue-生命周期函数（详解如何让组件在不同阶段执行相应操作）
百赢出品，必属精品
05-06 1543
生命周期函数是在Vue组件生命周期中的特定时间点执行的函数。Vue实例有一个完整的生命周期，从创建、挂载、更新到销毁。在这个过程中，Vue提供了一系列的钩子函数，让你能够在特定阶段执行自定义逻辑。生命周期函数是在Vue组件实例化、挂载、更新、销毁等不同阶段触发的钩子函数，用于执行特定的操作。: 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段，组件实例的选项对象已经被处理，但实例的数据和方法尚未初始化。created。
【Vue】清除定时器后定时器仍在运行
leader_li的博客
08-25 1623
我们在 vue 中使用 setTimeout() 或 setInterval() 后，通常都会在 destroyed()或 beforeDestroy() 方法里去清除。解决方案：可以在beforeRouteLeave()方法清除
clearInterval()仍然执行剩余代码的解决方案
自学小白成长历程
02-24 1777
//简单移动动画封装 function animate(obj, target) { obj.move = setInterval(function () { if (obj.offsetLeft >= target) { //停止动画 clearInterval(obj.move); //会继续执行完move，然后再停止 } obj.style.left
clearInterval 清除计时器后，定时器回调还执行问题解决
jiangjunyuan168的博客
01-25 1643
在使用 setInterval 的过程中，通过 clearInterval 清除定时器后回调函数依旧执行了一次才被清除。
调用clearInterval(), 定时器仍在进行
Charonmomo的博客
10-26 517
把 timer 改成 useState 那种方式就可以了.我是在 react 的函数组件中遇到这个问题的,来清除定时器了, 但是发现定时器还在运行.在 fail() 函数中调用。
VUE3跳转页面时 定时器未清除解决
m0_65607651的博客
01-04 1971
VUE3跳转页面时 定时器未清除解决
Vue为什么组件销毁后定时器会继续
yangchuangxyz的博客
05-31 1217
如果我们没有在组件的生命周期方法中手动清除定时器，在组件被销毁后，该定时器仍然会继续运行，并且由于此时组件实例已经不存在于页面中，虚拟 DOM 无法监测到定时器的状态变化。当我们在 Vue 组件中创建定时器时，实际上是在组件的生命周期方法（例如 mounted ）中注册了该定时器。这意味着，在组件被销毁时，虽然页面上已经看不到该组件，但是组件实例却还存在于内存中，而其中包括已经注册的定时器。当一个对象不再被引用时，它仍然可能在内存中保留一段时间，直到垃圾回收机制判断它不再可达时才会被回收。
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在开发Vue应用时，理解父子组件的生命周期执行顺序和钩子函数是至关重要的。 Vue实例的生命周期包括多个阶段，每个阶段都有相应的钩子函数（hook），这些钩子函数是Vue实例在特定生命周期阶段被调用的函数。当创建...
Vue清除定时器setInterval优化方案分享
10-15
常见的做法是在组件的生命周期钩子`beforeDestroy`中手动清除定时器。这种方法直接简单，但存在缺陷： ```javascript data() { return { timer: null // 定时器标识 } }, mounted() { this.timer = setInterval...
uni app beforeDestroy 清除定时器
07-09
在uni-app中，你可以使用`beforeDestroy`生命周期钩子函数来清除定时器。这个钩子函数会在页面被销毁之前被调用，你可以在其中执行一些清理操作，比如清除定时器、解绑事件监听器等。以下是一个示例代码： ```...
vue生命周期与钩子函数简单示例
10-17
Vue的生命周期是指Vue实例从创建到销毁的一系列过程，而钩子函数是在Vue生命周期的各个阶段内部提供给开发者进行自定义处理的函数。了解和掌握Vue的生命周期及钩子函数对于构建高质量的Vue应用至关重要。 Vue实例的...
vue 页面退出 组件不走beforeDestroy 计时器一直在执行
大圣爱吃香蕉
05-24 2493
调用组件可以通过 v-if 来设置组件创建与销毁 页面退出设置false可使组件销毁 执行beforeDestroy
在生命周期里面， 清除定时器
平凡的世界的博客
06-17 998
哇，今天忙了一天，快下班的时间，闲下来。 当我们在文件当中设置一个定时器，我应该在销毁前，清除定时器那么有时候会忘记清除，或者你可以少写一个声明周期，直接在方法里面使用，这样就不会忘记了 // 之前的写法 timer = setTimeout(()=> { // 执行时间 }, 1000) .... beforeDestroy: { clearTimeout(timer) } 现在 fn () { timer = setTimeout(() => { // 执行事
vue在beforeDestroy周期清除定时器无效
qq_61128752的博客
06-29 655
vue清除定时器
vue项目中使用定时器，但切换页面时定时器还在运行
weixin_30378311的博客
04-27 2719
可以用到destroyed ：组件离开销毁的时候，清掉定时器 destroyed: function () { clearInterval(xxx) } 转载于:https://www.cnblogs.com/handsome-jm/p/8963478.html
vue路由变化后，计时器还在执行，怎么清除计时器
weixin_39494582的博客
04-10 9862
我遇到过一个类似的问题在组件A中设置了定时器，当路由变化加载组件B后，A中的定时器依然在运行，我在A中的beforeDestory和destoryed里都尝试清除定时器，但无效，请问怎么解决？ 我翻看了下vue生命周期 vue生命周期简介 注：Vue2.0 探索之路——生命周期和钩子函数的一些理解，原文链接Vue2.0 探索之路——生命周期和钩子函数的一些理解 我们用bef...
JS设置定时器和清除定时器
热门推荐
大数据-攻城狮
09-03 18万+
JS设置定时器和清除定时器    在做项目中难免会碰到需要实时刷新，动画依次出现等等需求，这时候就需要定时器登上我们的代码舞台了，所以今天我们就先来了解一下JS定时器的设置和清除吧。 一、启用定时器    window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一...
vue项目中定时器无法清除
最新发布
qq_37899792的博客
02-23 719
路由切换过快的时候，切换到了其他页面（page2,page3...）时，当前页面（page1）的beforeDestroy函数已经触发了，但是当前页面（page1）的定时器还没有触发。当切换到其他页面（page2,page3...）的时候，当前页面（page1）的定时器才执行。) 的定时器是在一系列前置请求之后，才触发的。【此定时器前面有一堆请求，等这堆请求完成之后，定时器才会被触发】如果是当前的路由名称，才开始执行定时器。当前页面有定时器，并且定时器在离开页面时，有清除。当前页面 (假设当前页面为。
Vue/React为什么组件销毁后定时器会继续
有事儿私信。
05-22 858
如果我们没有在组件的生命周期方法中手动清除定时器，在组件被销毁后，该定时器仍然会继续运行，并且由于此时组件实例已经不存在于页面中，虚拟 DOM 无法监测到定时器的状态变化。当一个对象不再被引用时，它仍然可能在内存中保留一段时间，直到垃圾回收机制判断它不再可达时才会被回收。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值