当前位置: 首页 > news >正文

setInterval倒计时切换页面后不准

背景

最近在做一个倒计时时,发现当切换浏览器tab后,再切回倒计时页面,倒计时的数据不准,比真正的剩余时间多,短时间还好,时间长了,计时器的误差会很大。

原因

倒计时是用setInterval每1000毫秒触发一次。

在进入页面时,计算剩余时间,把剩余时间用setInterval每1000毫秒触发一次进行减法。

但是由于浏览器的优化机制,为了更极致的优化,在切换tab之后浏览器会把setInterval的执行效率降低,在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。那么这时候就不是1000毫秒减一次了,所以会有误差。

用setInterval实现计时

var start = new Date().getTime(), count = 0;
var interval = setInterval(function () {count++console.log(new Date().getTime() - (start + count * 1000) + 'ms')if(count == 10){clearInterval(interval);}
}, 1000)

image.png

可以看到,我打印的new Date().getTime() - (start + count * 1000) ,
也就是每次计时的误差,理想情况下,应该是0。

用setTimeout实现计时

var start = new Date().getTime(), count = 0,interval = 1000;
var timer = setTimeout(doFunc,interval);
function doFunc(){count++console.log(new Date().getTime() - (start + count * 1000) + 'ms');if(count < 10){timer = setTimeout(doFunc,interval);}
}

image.png

也是一样的会出现误差

setInterval、setTimeout误差的不同之处

setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每 100ms 执行一次,每次执行需要 5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。

为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。

模拟阻塞事件

setInterval

//阻塞代码
setInterval(function () {var n = 0while (n++ < 1000000000);
}, 1000)var start = new Date().getTime(), count = 0;
var interval = setInterval(function () {count++console.log(new Date().getTime() - (start + count * 1000) + 'ms')if(count == 10){clearInterval(interval);}
}, 1000)

image.png

setTimeout

//阻塞代码
setInterval(function () {var n = 0while (n++ < 1000000000);
}, 1000)var start = new Date().getTime(), count = 0,interval = 1000;
var timer = setTimeout(doFunc,interval);
function doFunc(){count++console.log(new Date().getTime() - (start + count * 1000) + 'ms');if(count < 10){timer = setTimeout(doFunc,interval);}
}

image.png

可以看到加了一些阻塞线程的代码后,误差越来越严重,
在实际项目中,执行计时器的同时,会有很多其他异步阻塞事件,会导致倒计时功能不精确。

解决方案

1、setInterval每次触发的时候,重新计算剩余时间(误差在一分钟以内)

2、Web Workers(这个在nuxt中引入会报错,涉及到webpack改动较大,暂时不用)

3、进行误差修正,也就是获取到误差的值,并且根据这个误差值来动态调整我们执行回调的间隔时间

  • 计算误差值
  • 动态调整执行setTimeout的间隔

加上动态误差修正

var start = new Date().getTime(), count = 0,interval = 1000;
var offset = 0;//误差时间
var nextTime = interval - offset;//原本间隔时间 - 误差时间
var timer = setTimeout(doFunc,nextTime);
function doFunc(){count++console.log(new Date().getTime() - (start + count * interval) + 'ms');offset = new Date().getTime() - (start + count * interval);nextTime = interval - offset;if (nextTime < 0) { nextTime = 0; }if(count < 10){timer = setTimeout(doFunc,nextTime);}
}

试试效果:

image.png

把每次的nextTime打印出来看看:

image.png

以看到每次的nextTime都会根据上次的误差值来动态调整,以尽量减少整体的误差。

相关文章:

setInterval倒计时切换页面后不准

背景 最近在做一个倒计时时&#xff0c;发现当切换浏览器tab后&#xff0c;再切回倒计时页面&#xff0c;倒计时的数据不准&#xff0c;比真正的剩余时间多&#xff0c;短时间还好&#xff0c;时间长了&#xff0c;计时器的误差会很大。 原因 倒计时是用setInterval每1000毫…...

信息安全三级概述

信息安全三级概述...

深入JVM:探索Java虚拟机

文章目录 1. JVM简介1.1 定义与核心作用1.2 JVM的跨平台特性 2. JVM内部结构深度探索2.1 类加载机制2.1.1 双亲委派模型2.1.2 OSGI框架2.1.3 类加载器分类 2.2 JVM运行时数据区2.2.1 程序计数器2.2.2 本地方法栈2.2.3 Java虚拟机栈 2.2.4 堆2.2.5 元数据区 2.3 JVM内存区域的性…...

【计算机网络】 RTT和RTO

文章目录 RTT——往返时延RTO&#xff08;Retransmission Timeout&#xff09;——超时重传时间 RTT——往返时延 RTT&#xff08;Round-Trip Time&#xff09;是计算机网络中的一个重要的性能指标&#xff0c;表示从发送端发送数据开始&#xff0c;到发送端接收到来自接收端的…...

Zabbix监控组件及流程

Zabbix 由5大组件构成 Zabbix Web、Zabbix Server、Zabbix Proxy、Zabbix Database、Zabbix Agent Zabbix监控系统具体监控系统流程如图&#xff1a; Zabbix Web Zabbix Web是基于PHP语言编写的WEB UI界面&#xff0c;展示Zabbix整个监控平台监控数据、配置信息、方便对整个…...

Type-C协议Ver2.0(学习笔记)

题记 本文以TYPE-C协议Ver2.0版本为基础&#xff0c;以直译为主&#xff0c;同时备注作者学习中遇到的问题与理解&#xff0c;如发现文中描述和协议原文有误&#xff0c;欢迎批评指正&#xff0c;感谢&#xff01; 1 简介 随着USB接口的持续成功&#xff0c;需要调整USB技术…...

智慧工地:实现作业区域安全管控

智慧工地是围绕工程现场人、机、料、法、环及施工过程中质量、安全、进度、成本等各项数据满足工地多角色、多视角的有效监管,实现工程建设管理的降本增效。 建设工程安全文明施工与质量提升,全方位的监测施工人员、各类器械设备、消防安全隐患&#xff0c;并提前对风险进行预警…...

【Unity插件】实现多人在线游戏——Mirror插件的使用介绍

文章目录 前言导入Mirror插件 简单介绍一、RPC调用二、错误注意 基本使用一、创建场景的网络管理器二、创建一个玩家三、添加玩家初始生成位置四、玩家控制五、同步摄像机六、同步不同角色的名字和颜色修改七、同步动画八、同步子弹方法一方法二 九、聊天功能十、场景同步切换十…...

GeoSOS-FLUS未来土地利用变化情景模拟模型

软件简介 适用场景 GeoSOS-FLUS软件能较好的应用于土地利用变化模拟与未来土地利用情景 的预测和分析中&#xff0c;是进行地理空间模拟、参与空间优化、辅助决策制定的有效工 具。FLUS 模型可直接用于&#xff1a; 城市发展模拟及城市增长边界划定&#xff1b;城市内 部高分…...

IntelliJ IDEA使用_Debug操作

文章目录 版本说明图标和快捷键查看变量计算表达式条件断点多线程调试 版本说明 当前的IntelliJ IDEA 的版本是2021.2.2&#xff08;下载IntelliJ IDEA&#xff09; ps&#xff1a;不同版本一些图标和设置位置可能会存在差异&#xff0c;但应该大部分都差不多。 图标和快捷键…...

市场的新宠:4G智能手表

现在人们提到智能手表&#xff0c;健康监测、运动记录、接打电话等定是他不可或缺的功能&#xff0c;而其中通讯功能在绝大数多的智能手表上都是通过蓝牙实现的&#xff0c;需要让手表通过蓝牙连接到手机端来进行。在没有手机的情况下&#xff0c;配置再高的蓝牙智能手表也是“…...

Pytorch Advanced(一) Generative Adversarial Networks

生成对抗神经网络GAN&#xff0c;发挥神经网络的想象力&#xff0c;可以说是十分厉害了 参考 1、AI作家 2、将模糊图变清晰(去雨&#xff0c;去雾&#xff0c;去抖动&#xff0c;去马赛克等)&#xff0c;这需要AI具有“想象力”&#xff0c;能脑补情节&#xff1b; 3、进行数…...

Python实操如何去除EXCEL表格中的公式并保留原有的数值

import xlwings as xw app xw.App(visibleTrue, add_bookFalse) # 创建一个不可见的Excel应用程序实例 wb app.books.open(rE:\公式.xlsx) # 打开Excel文件 sheet wb.sheets[DC] # 修改为你的工作表名称 # 假设需要清除公式的范围是A1到B10range_to_clear sheet.range(A…...

MFC串口通信控件MSCOMM32.OCX的安装注册

MSCOMM32.OCX是一个与Microsoft Corporation开发的MSComm控件相关联的文件。MSComm控件是软件应用程序用来与调制解调器、条形码读取器和其他串行设备等设备建立串行通信的通信控件。 下载地址1 https://download.csdn.net/download/m0_60352504/88345092 下载地址2 https://ww…...

27.顺序表练习题目(1)(2023王道数据结构2.2.3前8题)

【这里所有解答都写的是全部代码&#xff0c;目的是让大家能够直接复制上手运行&#xff0c;感受代码的运行过程&#xff0c;而不单单只是写了一个函数】 试题1&#xff1a;&#xff08;王道2023数据结构综合应用题1&#xff09; 从顺序表中删除具有最小值的元素&#xff08;…...

Unity VideoPlayer 指定位置开始播放

如果 source是 videoclip&#xff08;以下两种方式都可以&#xff09;&#xff1a; _videoPlayer.Play();Debug.Log("time: " _videoPlayer.clip.length);_videoPlayer.time 10; [SerializeField] VideoPlayer videoPlayer;public void SetClipWithTime(VideoClip…...

美团多场景建模的探索与实践

本文介绍了美团到家/站外投放团队在多场景建模技术方向上的探索与实践。基于外部投放的业务背景&#xff0c;本文提出了一种自适应的场景知识迁移和场景聚合技术&#xff0c;解决了在投放中面临外部海量流量带来的场景数量丰富、场景间差异大的问题&#xff0c;取得了明显的效果…...

第11篇:ESP32vscode_platformio_idf框架helloworld点亮LED

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 ​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播…...

React中的页面跳转方式详解

在React中&#xff0c;页面跳转通常通过路由来实现。React有多种路由库可供选择&#xff0c;其中最常用的是React Router。React Router提供了几种不同的跳转方式&#xff0c;包括使用组件进行页面跳转、使用组件进行重定向&#xff0c;以及使用编程式导航进行跳转。 使用组件进…...

Golang代码漏洞扫描工具介绍——govulncheck

Golang Golang作为一款近年来最火热的服务端语言之一&#xff0c;深受广大程序员的喜爱&#xff0c;笔者最近也在用&#xff0c;特别是高并发的场景下&#xff0c;golang易用性的优势十分明显&#xff0c;但笔者这次想要介绍的并不是golang本身&#xff0c;而且golang代码的漏洞…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...