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

setTimeout不准时,CSS精准实现计时器功能

实际开发过程中,我们会经常遇到,首次进入页面进行相应提示,然后指定时间后自动消失或者前端时钟展示等需求。

按照传统方案,我们可以使用 setTimeout 实现。但其存在:实际延时比设定值更久的情况。

setTimeout 不准时

有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久。

最小延时 >= 4ms

  1. If nesting level is greater than 5, and timeout is less than 4, then set timeout to 4. – HTML5 spec Timers

在浏览器中,由于函数嵌套到一定深度,会导致被阻塞。

function cb() { setTimeout(cb, 0)
}
setTimeout(cb, 0)

未被激活的 tabs 的定时最小延迟>=1000ms

为了优化 tab 的加载损耗(以及降低耗电量),在未被激活的 tab 中定时器的最小延时限制为 1S(1000ms)。

超时延迟

除了"最小延时"之外,定时器仍然有可能因为当前页面(或者操作系统/浏览器本身)被其他任务占用导致延时。

需要被强调是,直到调用 setTimeout()的主线程执行完其他任务之后,回调函数和代码段才能被执行。

最大延时值

包括 IE、Chrome、Safari、Firefox 在内的浏览器其内部以 32 位带符号整数存储延时。这就会导致如果一个延时 (delay) 大于 2147483647 毫秒 (大约 24.8 天) 时就会溢出,导致定时器将会被立即执行。-- setTimeout/setInterval delay数值过大问题

打破 4ms 的限制

如果想在浏览器中实现 0ms 延时的定时器,可以尝试下述方法

(function() {var timeouts = [];var messageName = "zero-timeout-message";function setZeroTimeout(fn) {timeouts.push(fn);window.postMessage(messageName, "*");}function handleMessage(event) {if (event.source == window && event.data == messageName) {event.stopPropagation();if (timeouts.length > 0) {var fn = timeouts.shift();fn();}}}window.addEventListener("message", handleMessage, true);window.setZeroTimeout = setZeroTimeout;
})();

CSS更准时

如果要实现特别准时的业务场景(如,时钟)。显然 setTimeout/setInterval 不是最佳实践,如何避免同步阻塞卡顿,是突破该问题的重要一点。
在这里插入图片描述

这里,使用 css 动画来实现,css 动画有几个显著的优点:

  1. 不依赖 javascript,且有成熟的相关 api;
  2. 运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅;
  3. 让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。

animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

属性说明示例
animation-name指定应用的一系列动画animation1,animation2
animation-duration指定一个动画周期的时长,单位 s 或者 ms60s
animation-timing-function在每一动画周期中执行的节奏easelinearsteps(60)
animation-delay定义动画于何时开始,单位 s 或者 ms100ms
animation-iteration-count定义动画在结束前运行的次数infinite(无限次)、3
animation-direction指示动画是否反向播放normalalternatereverse
animation-fill-mode设置 CSS 动画在执行之前和之后如何将样式应用于其目标forwardsbackwards
animation-play-state定义一个动画是否运行或者暂停runningpaused
animation: timer 60s infinite steps(60) forwards;

steps(number_of_steps, direction):定义了一个阶梯函数,将输出值的域等距地划分。

在这里插入图片描述

通过 自定义数据属性 绑定要显示的值。这样在 css 中,可以通过表达式 attr() 用来获取值。

<div class="container"><p data-seconds="00 01 02 03 04 05 06 07 08 09"></p>
</div>

通过伪元素显示当前值(每次只显示1个),然后动画周期的时长 10s ,等距划分为10步。

每 1s 中移动向量的纵坐标。

.container p {height: 68px;width: 68px;line-height: 68px;overflow: hidden;
}
.container p::after {display: block;content: attr(data-seconds);animation: timer 10s infinite steps(10) forwards;
}@keyframes timer {from {transform: translate3d(0, 0, 0);}to {transform: translate3d(0, -100%, 0);}
}

相关文章:

setTimeout不准时,CSS精准实现计时器功能

实际开发过程中&#xff0c;我们会经常遇到&#xff0c;首次进入页面进行相应提示&#xff0c;然后指定时间后自动消失或者前端时钟展示等需求。 按照传统方案&#xff0c;我们可以使用 setTimeout 实现。但其存在&#xff1a;实际延时比设定值更久的情况。 setTimeout 不准时…...

单细胞跨模态分析综述

单细胞技术的最新进展使跨模态和组织位置的细胞高通量分子分析成为可能。单细胞转录组数据现在可以通过染色质可及性、表面蛋白表达、适应性免疫受体库分析和空间信息进行补充。跨模态单细胞数据的可用性越来越高&#xff0c;推动出新的计算方法&#xff0c;以帮助科学家获得生…...

【零基础学机器学习 1】什么是机器学习?

机器学习的社会应用 1. 金融风控 机器学习在金融风控方面的应用非常广泛&#xff0c;可以用于预测借款人的信用风险、欺诈行为等。通过收集大量的历史数据&#xff0c;构建机器学习模型&#xff0c;可以对借款人的信用风险进行预测&#xff0c;从而帮助金融机构降低风险。 2…...

ARM处理器与中断——嵌入式(驱动)软开基础(一)

1 CPU的内部结构? CPU的内部结构大致可以分为: (1)控制单元(指令寄存器、指令译码器、操作控制器)。 (2)运算单元(算术逻辑单元)。 (3)存储单元(专用寄存器和通用寄存器) (4)时钟。 2 CPU跟内存、虚拟内存、硬盘的关系? (1)CPU要调用的程序和数据来自…...

WX小程序 - 2

条件渲染&#xff1a; wx:if "{{ newlist.length 0 }}" wx:else 跳路由&#xff1a;绑定点击事件&#xff0c;执行跳转页面 bindtap data-id"{{ item.id }}" 添加id wx.navigateTo 跳路由并传参&#xff0c; 下一个路由 onLoad生命周期可以获得参数…...

开源之夏2023 | 欢迎申请openEuler Embedded SIG开发任务

关于开源之夏 开源之夏是开源软件供应链点亮计划下的暑期活动&#xff0c;由中科院软件研究所与openEuler社区联合主办&#xff0c;旨在鼓励在校学生积极参与开源软件的开发维护&#xff0c;促进优秀开源软件社区的蓬勃发展。 活动联合各大开源社区&#xff0c;针对重要开源软件…...

【异常解决】vim编辑文件时提示 Found a swap file by the name “.start.sh.swp“的解决方案

vim编辑文件时提示 Found a swap file by the name ".start.sh.swp"的解决方案 一、问题描述二、原因说明三、解决方案3.1 方案1 删除即可3.2 方案2 禁止生成swp文件 一、问题描述 vim编辑文件时提示 Found a swap file by the name “.start.sh.swp”&#xff0c;如…...

「企业应用架构」应用架构概述

在信息系统中&#xff0c;应用架构或应用架构是构成企业架构&#xff08;EA&#xff09;支柱的几个架构域之一 应用架构描述了业务中使用的应用程序的行为&#xff0c;重点是它们如何相互之间以及如何与用户交互。它关注的是应用程序消费和生成的数据&#xff0c;而不是它们的内…...

ePWM模块(3)

比较模块 CMPA:比较寄存器A,其值与TBCTR值比较,相同时,事件发送到动作模块。 CMPB:比较寄存器B,其值与TBCTR值比较,相同时,事件发送到动作模块。 CMPCTL:控制寄存器(重要) SHDWAFULL(或SHDWBFULL):CMPA(或B)阴影寄存器满标志位 0:未满 1:满了 SHDWAMODE(或…...

【笔试强训选择题】Day11.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录…...

JVM知识

垃圾收集器就是内存回收的具体实现 Serial Serial收集器是最基本的&#xff0c;发展历史最悠久的收集器。在JDK1.3之前是虚拟机新生代收集的唯一选择。是一种单线程收集器&#xff0c;只会使用一个CPU或者一条收集线程去完成垃圾收集工作&#xff0c;在进行垃圾收集的时候需要…...

操作系统第二章——进程与线程(中)

和光同尘&#xff0c;与时舒卷 文章目录 2.2.1 调度的概念&#xff0c;层次知识总览调度的基本概念高级调度低级调度中级调度三层调度的联系&#xff0c;对比进程的挂起态和七状态模型知识回顾 2.2.2 进程调度的时机&#xff0c;切换与过程&#xff0c;方式知识总览进程调度的时…...

AlphaFold的极限:高中生揭示人工智能在生物信息学挑战中的缺陷

人工智能程序AlphaFold (AlphaFold2开源了&#xff0c;不是土豪也不会编程的你怎么蹭一波&#xff1f;)&#xff0c;通过预测蛋白质结构解决了结构生物信息学的核心问题。部分AlphaFold迷们声称“该程序已经掌握了终极蛋白质物理学&#xff0c;其工作能力已超越了最初的设计”。…...

RocketMQ双主双从环境搭建

环境要求 64位操作系统&#xff0c;推荐 Linux/Unix/macOS 64位 JDK 1.8 服务器准备 准备4台服务器两台master两台slave&#xff0c;如果服务器紧凑&#xff0c;则至少需要两台服务器相互master-slave IP HOSTS 172.*******.120 rocketmq-nameserver1 rocketmq-master1 …...

next.js博客搭建_初始化next项目(第一步)

文章目录 ⭐前言⭐next初始化TypeScript 开发项目安装react的ui框架&#xff08;tDesign&#xff09;设计布局 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本期给大家分享next项目搭建博客的开始。 背景 因为我的博客网站https://yongma16.xyz是基于vue2搭建的&am…...

ACM - 其他算法 - 基础(前缀和 + 差分)

ACM- 其他算法 一、前缀和模板例题1、区间余数求K倍区间个数&#xff1a;AcWing 1230. K倍区间例题2、前缀和哈希求最长个数平分子串:Leetcode 面试题 17.05 字母与数字 二、差分1、一维差分2、二维差分 一、前缀和 模板 //一维前缀和 S[i] a[1] a[2] ... a[i] a[l] ... …...

No.056<软考>《(高项)备考大全》【冲刺10】《软考高项常见工具口语化解释》

《软考高项常见工具口语化解释》 序号工具名称口语化属于哪个过程1模板、表格和标准就是用之前的项目的模版、表格、标准&#xff0c;结合本项目进行了修改&#xff0c;在编制一些计划、方案的时候就可以采用这个工具和技术。可以拿来就用的&#xff0c;节约时间、提高质量的。…...

MySQL原理(九):表分区和分库分表

前言 上一篇介绍了 MySQL 的存储过程和触发器&#xff0c;这一篇将介绍表分区和分库分表相关的内容。 表分区 原本的表文件都是以完整的形式存储在磁盘中&#xff0c;而表分区则是指将一张表的数据拆分成多个磁盘文件&#xff0c;然后放到磁盘中存储。 做了表分区之后&…...

【Ehcache技术专题】「入门到精通」带你一起从零基础进行分析和开发Ehcache框架的实战指南(缓存查询-配置篇)

缓存查询 Ehcache中为我们提供了可以对Cache中缓存的元素进行查找的方式。其逻辑类似于SQL中的查找。通过给定各种限制条件&#xff0c;我们可以构造各种复杂的查询&#xff0c;然后返回结果集&#xff0c;也可以对查询进行分组和排序等。 使Cache可查询 Ehcache中的查询是针…...

MySQL基础(七)单行函数

1. 函数的理解 1.1 什么是函数 函数在计算机语言的使用中贯穿始终&#xff0c;函数的作用是什么呢&#xff1f;它可以把我们经常使用的代码封装起来&#xff0c;需要的时候直接调用即可。这样既提高了代码效率&#xff0c;又提高了可维护性。在 SQL 中我们也可以使用函数对检…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

这个警告表明您在使用Vue的esm-bundler构建版本时&#xff0c;未明确定义编译时特性标志。以下是详细解释和解决方案&#xff1a; ‌问题原因‌&#xff1a; 该标志是Vue 3.4引入的编译时特性标志&#xff0c;用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler…...

【2D与3D SLAM中的扫描匹配算法全面解析】

引言 扫描匹配(Scan Matching)是同步定位与地图构建(SLAM)系统中的核心组件&#xff0c;它通过对齐连续的传感器观测数据来估计机器人的运动。本文将深入探讨2D和3D SLAM中的各种扫描匹配算法&#xff0c;包括数学原理、实现细节以及实际应用中的性能对比&#xff0c;特别关注…...

第14节 Node.js 全局对象

JavaScript 中有一个特殊的对象&#xff0c;称为全局对象&#xff08;Global Object&#xff09;&#xff0c;它及其所有属性都可以在程序的任何地方访问&#xff0c;即全局变量。 在浏览器 JavaScript 中&#xff0c;通常 window 是全局对象&#xff0c; 而 Node.js 中的全局…...

python3GUI--基于PyQt5+DeepSort+YOLOv8智能人员入侵检测系统(详细图文介绍)

文章目录 一&#xff0e;前言二&#xff0e;技术介绍1.PyQt52.DeepSort3.卡尔曼滤波4.YOLOv85.SQLite36.多线程7.入侵人员检测8.ROI区域 三&#xff0e;核心功能1.登录注册1.登录2.注册 2.主界面1.主界面简介2.数据输入3.参数配置4.告警配置5.操作控制台6.核心内容显示区域7.检…...