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

最新推荐文章于 2024-05-09 10:29:14 发布
最新推荐文章于 2024-05-09 10:29:14 发布
阅读量835 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIJIANGNIHAO123/article/details/130469806
版权

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

详解如下：

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

 

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

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

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

 

江--
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
clearInterval 清除计时器后，定时器回调还执行问题解决
jiangjunyuan168的博客
01-25 722
在使用 setInterval 的过程中，通过 clearInterval 清除定时器后回调函数依旧执行了一次才被清除。
vue组件销毁时定时器依然执行问题
believet93的博客
08-06 2993
1、先上代码： <script> import { setInterval } from 'timers' export default { name: 'Monitor', data() { return { intervalId: null } }, methods: { star...
element表格勾选后翻页任然选中
weixin_44197797的博客
06-30 404
1.在中加属性row-key 2.勾选列在属性reserve-selection 3.自定义方法 getRowKey(row) { return row[this.rowKey] }, 即可
element-ui中 多选表格选中之后，分页跳转任然选中
weixin_44567025的博客
04-28 550
然后在方法中加入 getRowKey方法就可以了
【Vue】清除定时器后定时器仍在运行
leader_li的博客
08-25 1048
我们在 vue 中使用 setTimeout() 或 setInterval() 后，通常都会在 destroyed()或 beforeDestroy() 方法里去清除。解决方案：可以在beforeRouteLeave()方法清除
微信小程序页面跳转后清除定时器
怎奈你何的博客
04-08 856
笔记 前言：因为做项目，有些数据是实时的，所以要用定时器定时调用接口请求。最开始我加上定时请求，然后跳转的时候，接口请求还是一直执行。但是我想要的是页面跳转后，就清除定时器了。期间有一些小问题的出现，不过不难！ 个人做个笔记哈！ 不多说,放代码！ 代码 data: { timer:null } <!--要时时刷新请求的接口，记得要放在onshow里面，放在onLoad里面的话，跳转到别的界面的时候，还是会一直请求。--> onShow: function () {
小程序退出页面时清除定时器
qq_39207066的博客
04-16 2万+
由于小程序页面退出时，定时器和长连接等不会自动清除断开，所以需要我们在生命周期函数中手动清除但是定时器定义在函数中，我们无法在函数外清除，所以为了解决这个问题，我们需要把定时器定义在data中比如：Loadingtime是一个定时器，在data中定义Loadingtime：''。然后在time方法中使用在onUnload监听页面卸载生命周期函数中清除如此在退出该页面时，就可以清除该定时器了...
关于事件及定时器的清除方法
Callme_FanXu的博客
12-26 1536
方法一：在beforeDestroy生命周期销毁方法二：在事件及定时器的方法或者生命周期函数中声明并销毁。
vue 生命周期 beforeDestroy 调用
cppp1111的博客
03-22 2万+
vue 生命周期 beforeDestroy 调用1. 离开当前路由，会直接调用2.离开当前路由，不会直接调用，需要程序控制调用；3.``应用于全局事件`` 1. 离开当前路由，会直接调用 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 2.离开当前路由，不会直接调用，需要程序控制调用； 当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用 beforeR
Vue清除定时器setInterval优化方案分享
11-20
最后在beforeDestroy()生命周期内清除定时器： beforeDestroy() { clearInterval(this.timer); this.timer = null; } 方案1有两点不好的地方，引用尤大的话来说就是： 它需要在这个组件实例中保
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
Vue为什么组件销毁后定时器会继续
yangchuangxyz的博客
05-31 939
如果我们没有在组件的生命周期方法中手动清除定时器，在组件被销毁后，该定时器仍然会继续运行，并且由于此时组件实例已经不存在于页面中，虚拟 DOM 无法监测到定时器的状态变化。当我们在 Vue 组件中创建定时器时，实际上是在组件的生命周期方法（例如 mounted ）中注册了该定时器。这意味着，在组件被销毁时，虽然页面上已经看不到该组件，但是组件实例却还存在于内存中，而其中包括已经注册的定时器。当一个对象不再被引用时，它仍然可能在内存中保留一段时间，直到垃圾回收机制判断它不再可达时才会被回收。
2024前端面试题！（附答案及解析）（2024.5月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 6万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.5月最新版）
学习js笔记
m0_50790222的博客
07-29 207
一、逻辑难点 二、各种概念和方法 1、js三大模块 核心语法--ECMAScript---es5 es6 文档对象模型--DOM---document Object Module---js 操作HTML界面结构、样式、内容 浏览器对象模型--BOM---Browser Object Module---js操作浏览器 打开新页面-页面地址切换-前进后退-弹框-调试器输出 2、JS引入样式 行内：在标签属性里执行 页内 ：js代码直接写在script标签里面，script标签可.
2021 春季 前端最新面试题，js基础到js高阶 从容回答
酱子
01-06 3604
2020回顾-个人web分享JavaScript面试题附加回答 1. JavaScript垃圾回收机制的了解 对于在JavaScript中的字符串，对象，数组是没有固定大小的，只有当对他们进行动态分配存储时，解释器就会分配内存来存储这些数据，当JavaScript的解释器消耗完系统中所有可用的内存时，就会造成系统崩溃。 内存泄漏，在某些情况下，不再使用到的变量所占用内存没有及时释放，导致程序运行中，内存越占越大，极端情况下可以导致系统崩溃，服务器宕机。 so，JavaScript有自己的一套垃圾回收机制
clearInterval()仍然执行剩余代码的解决方案
自学小白成长历程
02-24 1686
//简单移动动画封装 function animate(obj, target) { obj.move = setInterval(function () { if (obj.offsetLeft >= target) { //停止动画 clearInterval(obj.move); //会继续执行完move，然后再停止 } obj.style.left
vue 生命周期4 销毁流程 beforeDestroy destroyed
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
vue数据大屏并发请求
最新发布
qq_60839348的博客
05-09 744
vue数据大屏并发请求
uni app beforeDestroy 清除定时器
07-09
在uni-app中，你可以使用`beforeDestroy`生命周期钩子函数来清除定时器。这个钩子函数会在页面被销毁之前被调用，你可以在其中执行一些清理操作，比如清除定时器、解绑事件监听器等。以下是一个示例代码： ```javascript export default { data() { return { timerId: null // 定时器ID } }, beforeDestroy() { // 在这里清除定时器 clearInterval(this.timerId); }, mounted() { // 在页面挂载完成后启动定时器 this.timerId = setInterval(() => { console.log('定时器执行'); }, 1000); } } ``` 在上面的示例中，我们在`data`中定义了一个`timerId`变量用于保存定时器的ID。在`mounted`生命周期钩子函数中，我们启动了一个定时器，并将定时器的ID保存到`timerId`变量中。当页面被销毁时，`beforeDestroy`生命周期钩子函数会被触发，我们在其中使用`clearInterval`方法清除定时器。 这样，在页面销毁前，定时器会被正确清除，避免了内存泄漏和不必要的计时操作。 希望这对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值