网站首页 > 技术文章 正文
最近组员遇到了一个 BUG,我们的需求是这样的:前端需要通过轮询的方式,每隔一段时间去做一些逻辑处理,并向后端发送请求上报
出现的 BUG 是:后端发现前端有很长一段时间都没有向后端发起上报请求
问题排查
我们的的轮询是通过 setInterval 定时器去完成的,那么为啥定时器里的逻辑没执行呢?
通过向用户询问,我们得知了用户有很长一段时间没有去看这个前端页面,并且把这个页面给隐藏了
在这里我跟大家科普一个监听事件 visibilitychange,他可以用来监听当前标签页页面显隐的切换
于是我需要复现一下这个 BUG ,我简单写了以下的代码,并且做这些事:
- 先在页面待一会
- 隐藏页面一段时间
- 再显示页面,并查看控制台的输出是否连续
我先试着离开很短一段时间,再回去看,可以发现,控制台的输出还是很连续的,这说明离开很短时间,基本不会影响到定时器执行的连续性
第二次我离开了一两分钟时间,可以看到定时器执行的连续性不正常了,这说明了当页面隐藏的时候,定时器的执行有点类似于节流的感觉,从而导致不太连续
定时器连续性的保证?
其实浏览器这么做也是有他的道理的,毕竟当页面隐藏的时候,说明这个页面对于用户当前来说,不太重要了,所以适当减少一些代码逻辑的运行,节省性能,也是无可厚非的~
但是如果你想一直保证定时器的连续性,还是有办法做到的,可以用到我们的老朋友:Web Worker
现在就能保证定时器的连续性执行了~
猜你喜欢
- 2025-06-30 跨标签页通信(五):IndexedDB(跨标签页通讯)
- 2025-06-30 Netty是如何一步一步演化而来的,不断进化成就Netty
- 2025-06-30 React 官方为何坚持推出反常规的RSC组件?
- 2025-06-30 "前端开发者不可错过的技能:SSE流式传输助力实时数据更新!"
- 2025-06-30 让 React 代码行数减少78%的 htmlx 有这么神?
- 2025-06-30 前端开发进阶:前端开发中如何高效渲染大数据量?
- 2025-06-30 8行代码实现一个websoket(代码如何实现)
- 2025-06-30 实现前端工程师的第一个AI应用(前端之父是谁)
- 2025-06-30 nginx服务器负载均衡配置(nginx负载均衡配置详解)
- 2025-06-30 前端定时任务的神库!快把它加到你的项目中去!
你 发表评论:
欢迎- 581℃几个Oracle空值处理函数 oracle处理null值的函数
- 576℃Oracle分析函数之Lag和Lead()使用
- 561℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 561℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 556℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 546℃【数据统计分析】详解Oracle分组函数之CUBE
- 535℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 530℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)