记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析

这篇具有很好参考价值的文章主要介绍了记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析

背景

我最近修复了一个倒计时延迟的bug,情况是用户10:00设置了10分钟倒计时,10:06查看时发现倒计时还有8分钟,倒计时出不准确、延迟的情况。

倒计时大概逻辑如下:

const leftTime = 600; //单位为秒
const timer = setInterval(() => {
  leftTime -= 1;
  if(leftTime === 0) {
    clearInterval(timer);
  }
}, 1000);

通过排查是浏览器的优化策略导致的。

为什么浏览器优化策略会造成定时器不准时?又该怎么解决这个问题?本文会围绕这两个问题展开说明!

浏览器优化策略对定时器的影响

浏览器的优化策略是指浏览器为了提高性能和节省资源而对特定任务进行的优化。在后台标签页中,浏览器可能会对一些任务进行节流或延迟执行,以减少CPU和电池的消耗。

而定时器setIntervalsetTimeout就是受浏览器优化策略的影响,导致定时器的执行时间间隔被延长。所以在浏览器切换到其他页面或者最小化时,当前页面的定时器可能不会按照预期的时间间隔准时执行。

我们实验一下:设置一个定时器,每500ms在控制台输出当前时间;然后再监听该标签页的visibilitychange事件,当其选项卡的内容变得可见或被隐藏时,会触发该事件。

// 设置定时器
const leftTime = 600;  // 倒计时剩余时间
setInterval(() => {
  const date = new Date();
  leftTime.value -= 1;
  console.log(`倒计时剩余秒数:${ leftTime.value }`, `当前时间秒数:${ date.getSeconds() }`);
        }, 1000);
// 通过监听 visibilitychange 事件来判别该页面是否可见
document.addEventListener('visibilitychange', function () {
  if(document.hidden) {
    console.log('页面不可见')
  }
})

执行结果如下:

记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析

我们观察执行结果会发现,在标签页处于不可见状态后,setInterval从1000ms的时间间隔延长成了2000ms。

由此可见,当浏览器切换其他页面或者最小化时,倒计时的误差就出现了,setInterval定时器也不会在1000ms后减去1。对于时间较长的倒计时来说,误差会更大。

解决思路

既然浏览器的定时器有问题,那我们就不依赖定时器去计算剩余时间。

我们可以在用户配置倒计时后,立即计算出结束时间并保存,随后通过结束时间减去本地时间就得出了剩余时间,而且不会受定时器延迟的影响。将最上面提及到的倒计时伪代码修改如下:

// ......
const leftTime = 600 * 1000
const endTime = Date.now() + leftTime;  // 倒计时结束时间
setInterval(() => {
  const date = new Date();
  leftTime = Math.round((endTime - Date.now()) / 1000);
  console.log(`倒计时剩余秒数:${ leftTime }`, `当前时间秒数:${ date.getSeconds() }`);
  if(leftTime <= 0) {
    clearInterval(timer);
  }
}, 1000)
根据以上代码进行计算,即使标签页不处于可见状态,setInterval延迟执行,对leftTime也没有影响。 执行结果如下(标签页处于不可见状态时):

记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析

题外话

用 setTimeout 实现 setInterval

实现思路是setTimeout的递归调用。以上面的举例代码为例作修改:

const leftTime = 600 * 1000;
const endTime = Date.now() + leftTime;  // 倒计时结束时间
function setTimer() {
  leftTime = Math.round((endTime - Date.now()) / 1000);
  if ( leftTime <= 0 ) {
    endTime = 0;
    leftTime = 0;
  } else {
    setTimeout(setTimer, 1000);
  }
}

本文转载于:

https://juejin.cn/post/7309693162369171507

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析文章来源地址https://www.toymoban.com/news/detail-778771.html

到了这里,关于记录--“浏览器切换到其他页面或最小化时,倒计时不准确“问题解析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium+python切换浏览器窗口

    selenium在当前浏览器页面打开了新的窗口,此时如果要聚焦到新开的浏览器窗口,就需要切换到新的窗口,切换窗口的操作,具体selenium+python示例如下:

    2024年02月15日
    浏览(45)
  • 谷歌浏览器:快速切换搜索引擎

    第一步:点击浏览器右上角 “3 个点”,找到设置 第二步:找到 “搜索引擎”,再找到 “管理搜索引擎和网站搜索”,点进去。 第三步:为你常用的搜索引擎设置 “快捷字词” 至此,大功告成。 ​ 先在搜索栏输入你设置好的快捷字词,然后再按 “Tab” 键或空格键,就切

    2024年02月12日
    浏览(51)
  • selenium+python切换浏览器窗口--详细讲解

    在浏览器页面打开窗口后,有时点击按钮会打开新的页面,我们需要切换到新的窗口才能去定位操作,不然无法操作,切换窗口代码如下

    2024年02月14日
    浏览(47)
  • H5静态页面开发环境跳转小程序(微信浏览器,外部浏览器)

    网上有很多教程,但是具体的坑避不开,这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。 1.官方开发文档参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html 官方文档只提供了关键代码,但是没说怎么上传静态文件,怎么上

    2024年02月04日
    浏览(76)
  • Selenium如何隐藏浏览器页面?

    Selenium 隐藏 浏览器 页面   背景 在工作,学习中,我们常常会使用selenium来获取网页上的数据,编完完整程序之后,实现真正意义上的自动化获取,此时我们会发现在运行中往往会弹出浏览器页面,在调试过程中,这很方便,但是跑自动化时,我们就需要将浏览器隐藏在后台

    2024年02月03日
    浏览(44)
  • JS监听浏览器关闭、刷新及切换标签页触发事件

    蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。 visibilitychange visibilitychange可以监听到浏览器的切换标签页。  直接上代码:  beforeunload  beforeunload可以监听到页面的关闭,页签切换不会触发 关闭浏览器窗口的时候触发 通过点

    2024年02月08日
    浏览(54)
  • 谷歌浏览器被hao123网页(或其他网页)劫持了,怎么办?(已解决)

    今天打开chrome浏览器,莫名转到hao123网页,试了几次后,依旧如此。这时候我意识到可能自己的浏览器被劫持了。 原因: 可能安装到捆绑软件,其会修改浏览器快捷方式目标的内容。 DNS劫持。 系统资源WMI脚本被篡改。 原理: 我们打开浏览器,其实就是访问目标的内容,相

    2024年02月03日
    浏览(62)
  • python爬虫之selenium库,浏览器访问搜索页面并提取信息,及隐藏浏览器运行

    如果链接简单,爬虫可以通过链接用requests库提取页面信息,如爬取豆瓣top250影片信息,链接简单易懂。参考:爬取豆瓣top250影片信息 但如果遇到一些搜索之类的,基于js动态加载的网页,以上就不适合,如爬虫b站,搜索“爬虫”页面,第一页链接如下,第二页又是很长没规

    2024年01月23日
    浏览(110)
  • 新版edge浏览器读取谷歌浏览器上的历史记录

    上一篇: (3条消息) 新版edge浏览器读取谷歌浏览器上的历史记录_learningbilibili的博客-CSDN博客 https://blog.csdn.net/learningbilibili/article/details/123662218 关于上次的读取历史记录的问题是现在的edge浏览器最近的版本更新后出现了每次启动时从 Google Chrome 导入浏览器数据的功能,而且是

    2024年02月09日
    浏览(66)
  • 【浏览器篇】记录下浏览器保存PDF文件不同方式的小区别

    以前不太注意这些,最近搞文档比较多才发现为何保存的一部分PDF文件里面字体可以复制可以搜索,一部分保存的PDF里面的字体却无法复制、无法搜索等,发现是不同保存方式得到的文档权限不一样,做个记录!—【蘇小沐】 1.实验环境 系统 版本 Windows 11 专业工作站版 22H

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包