如何实现准时的setTimeout

背景

setTimeout 是不准的。因为 setTimeout 是一个宏任务,它的指定时间指的是:进入主线程的时间。

setTimeout(callback, 进入主线程的时间)

所以什么时候可以执行 callback,需要看 主线程前面还有多少任务待执行

由此,才有了这个问题。

我们可以通过这个场景来进行演示:

图片

运行代码如下,通过一个计数器来记录每一次 setTimeout 的调用,而设定的间隔 * 计数次数,就等于理想状态下的延迟,通过以下例子来查看我们计时器的准确性

function timer() { var speed = 50, // 设定间隔 counter = 1,  // 计数 start = new Date().getTime(); function instance() { var ideal = (counter * speed), real = (new Date().getTime() - start); counter++; form.ideal.value = ideal; // 记录理想值 form.real.value = real;   // 记录真实值 var diff = (real - ideal); form.diff.value = diff;  // 差值 window.setTimeout(function() { instance(); }, speed); }; window.setTimeout(function() { instance(); }, speed); 
} 
timer(); 

而我们如果在 setTimeout 还未执行期间加入一些额外的代码逻辑,再来看看这个差值。

... 
window.setTimeout(function() { instance(); }, speed); 
for(var x=1, i=0; i<10000000; i++) { x *= (i + 1); } 
} 
... 

图片

可以看出,这大大加剧了误差。

可以看到随着时间的推移, setTimeout 实际执行的时间和理想的时间差值会越来越大,这就不是我们预期的样子。类比真实的场景,对于一些倒计时以及动画来说都会造成时间的偏差都是不理想的。

这站图可以很好的描述以上问题:

图片

如何实现准时的 “setTimeout”

requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。

该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行,回调函数执行次数通常是每秒60次,也就是每16.7ms 执行一次,但是并不一定保证为 16.7 ms。

我们也可以尝试一下将它来模拟 setTimeout。

// 模拟代码 
function setTimeout2 (cb, delay) { let startTime = Date.now() loop() function loop () { const now = Date.now() if (now - startTime >= delay) { cb(); return; } requestAnimationFrame(loop) } 
} 

图片

发现由于 16.7 ms 间隔执行,在使用间隔很小的定时器,很容易导致时间的不准确。

图片

再看看额外代码的引入效果。

... window.setInterval2(function () { instance(); }, speed); 
} 
for (var x = 1, i = 0; i < 10000000; i++) { x *= (i + 1); } 
... 

图片

略微加剧了误差的增加,因此这种方案仍然不是一种好的方案。

while

想得到准确的,我们第一反应就是如果我们能够主动去触发,获取到最开始的时间,以及不断去轮询当前时间,如果差值是预期的时间,那么这个定时器肯定是准确的,那么用 while 可以实现这个功能。

理解起来也很简单:

图片

代码如下:

function timer(time) { const startTime = Date.now(); while(true) { const now = Date.now(); if(now - startTime >= time) { console.log('误差', now - startTime - time); return; } } 
} 
timer(5000); 

打印:误差 0

显然这样的方式很精确,但是我们知道 js 是单线程运行,使用这样的方式强行霸占线程会使得页面进入卡死状态,这样的结果显然是不合适的。

setTimeout 系统时间补偿

这个方案是在 stackoverflow 看到的一个方案,我们来看看此方案和原方案的区别

原方案

图片

setTimeout系统时间补偿

图片

当每一次定时器执行时后,都去获取系统的时间来进行修正,虽然每次运行可能会有误差,但是通过系统时间对每次运行的修复,能够让后面每一次时间都得到一个补偿。

function timer() { var speed = 500, counter = 1,  start = new Date().getTime(); function instance() { var real = (counter * speed), ideal = (new Date().getTime() - start); counter++; var diff = (ideal - real); form.diff.value = diff; window.setTimeout(function() { instance(); }, (speed - diff)); // 通过系统时间进行修复 }; window.setTimeout(function() { instance(); }, speed); 
} 

图片

再来看看加入额外的代码逻辑的情况。

图片

依旧非常的稳定,因此通过系统的时间补偿,能够让我们的 setTimeout 变得更加准时,至此我们完成了如何让 setTimeout 准时的探索。

好了我们最后来总结一下4种方案的优缺点

while、Web Worker、requestAnimationFrame、setTimeout 系统时间补偿

图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578651.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL8安装教程

MySQL安装教程 安装环境 Windows 10 软件下载 1、官网下载 官网可以下载最新版本的MySQL 8.0 下载地址&#xff1a; https://dev.mysql.com/downloads/windows/installer/8.0.html 开始安装 1、下载完成后&#xff0c;我们就开始安装&#xff0c;双击安装包&#xff0c…

李宏毅机器学习2023|图像生成模型

文章目录 图像生成Autoregressive&#xff08;各个击破&#xff09;Non-Autoregressive&#xff08;一次到位&#xff09;一次到位法额外的输入——从一个高维的Normal Distribution作simple得到一个向量常用的图片生成模型VAEFlow-based Generative ModelDiffusion ModelGAN D…

计量校准方案分享No.11——定碳定硫分析仪校准方案

[测量单元:红外碳硫分析仪,是否使用220V交流电源:是,碳测量范围:0.005%-4.3%,硫测量范 围:0.0005%-0.33%] 一 依据文件 CNAS CL01-G002-2021 《测量结果的计量溯源性要求》现行有效 RB/T 034-2020 《测量设备校准周期的确定和调整方法指南》现行有效 CNAS TRL-004-2017 《 …

跨境电商独立站的6大模式,任你选择!

在几年前搭建跨境电商独立站和第三方平台基本上是同步发展起来的&#xff0c;但在后期的发展过程中&#xff0c;独立站经过不同时期的革新&#xff0c;形成了自己的模式。 当你准备好创建独立站的时候&#xff0c;首先你需要了解的就是独立站运营的模式类型&#xff0c;并找到最…

【Qt-Edit】

Qt编程指南 ■ QTextEdit■ QLineEdit■ QLineEdit 设置正则表达式 ■ QPlainTextEdit■ QKeySequenceEdit■ QList<QLineEdit *> edits■■ ■ QTextEdit /* 实例和对象&#xff0c;设置位置和显示大小 */ textEdit new QTextEdit(this); textEdit->setGeometry(0…

每日一题(LeetCode)----栈和队列-- 简化路径

每日一题(LeetCode)----栈和队列-- 简化路径 1.题目&#xff08;71. 简化路径&#xff09; 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的…

ISO27001认证主要的审核方向

ISO27001审核主要针对组织的信息安全管理体系&#xff08;ISMS&#xff09;进行全面的审查&#xff0c;以确保其符合ISO/IEC 27001标准的要求。审核过程通常包括以下几个方面&#xff1a; 1. 组织环境&#xff1a;审核组织的信息安全管理体系是否能够在组织内部环境以及与外部供…

熟悉DHCP面临的安全威胁与防护机制

一个网络如果要正常地运行&#xff0c;则网络中的主机&#xff08;Host&#xff09;必需要知道某些重要的网络参数&#xff0c;如IP地址、网络掩码、网关地址、DNS服务器地址、网络打印机地址等等。显然&#xff0c;在每台主机上都采用手工方式来配置这些参数是非常困难的、或是…

Springboot学习

Springboot扩展点之InitializingBean-CSDN博客

C/S医院检验LIS系统源码

一、检验科LIS系统概述&#xff1a; LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化&#xff0c;检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据库中&#xff…

《微信小程序开发从入门到实战》学习六十三

6.4 交互API 使用交互API可以在小程序中显示各种弹窗或动画&#xff0c;达到交互反馈的目的。 6.4.1 提示框API 使用wx.showToast接口可显示消息提示框。接口接受Object参。属性如下&#xff1a; title&#xff08;必填&#xff09; 提示的内容 icon …

postgres数据库安装

选择所需数据库版本进行下载 下载地址&#xff1a;PostgreSQL: File Browser 我是以/data当作主目录&#xff0c;所以在/data下创建俩文件夹&#xff0c;默认目录应该是usr mkdir software mkdir module 进入目录&#xff0c;上传下载的gz安装包 cd software rz 解压缩,版本…

6-2 递归求阶乘和

本题要求实现一个计算非负整数阶乘的简单函数&#xff0c;并利用该函数求 1!2!3!...n! 的值。 函数接口定义&#xff1a; double fact( int n ); double factsum( int n ); 函数fact应返回n的阶乘&#xff0c;建议用递归实现。函数factsum应返回 1!2!...n! 的值。题目保证输…

什么是数据资产化?数据怎样成为资产?怎样进入资产负债表?

财政部发布的《企业数据资源相关会计处理暂行规定》将从2024年1月1日起开始实施&#xff0c;为企业数据资源入表提供了基本指引&#xff0c;数据资产化有望迎来爆发期。什么是数据资产化&#xff0c;怎样让数据成为资产&#xff0c;成为了众多国有企业、上市公司关心的问题。 —…

JavaScript 中的双等号(==)和三等号(===)有何不同?何时使用它们?

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;JavaScript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-等号区别 目录 和 区别&#xff0c;分别在什么情况使用 一、等于操作符…

交换机端口镜像技术原理与配置

在网络维护的过程中会遇到需要对报文进行获取和分析的情况&#xff0c;比如怀疑有攻击报文&#xff0c;此时需要在不影响报文转发的情况下&#xff0c;对报文进行获取和分析。镜像技术可以在不影响报文正常处理流程的情况下&#xff0c;将镜像端口的报文复制一份到观察端口&…

掌握ElasticSearch(一):Elasticsearch安装与配置、Kibana安装

文章目录 〇、简介1.Elasticsearch简介2.典型业务场景3.数据采集工具4.名词解释 一、安装1.使用docker(1)创建虚拟网络(2)Elasticsearch安装步骤 2.使用压缩包 二、配置1.目录介绍2.配置文件介绍3.elasticsearch.yml节点配置4.jvm.options堆配置 二、可视化工具Kibana1.介绍2.安…

千万别放弃,运维工程师其实是一个被埋没的“朝阳”职位!

运维工程师的出路到底在哪里&#xff1f; 你是不是也常常听到身边的运维人员抱怨&#xff0c;他们的出路到底在哪里呢&#xff1f;别着急&#xff0c;让我告诉你&#xff0c;运维人员就像是IT界的“万金油”&#xff0c;他们像“修理工”一样维修服务器&#xff0c;像“消防员…