【坑】javascript中让setTimeout方法间隔时间更为精确

最新推荐文章于 2024-06-24 13:53:50 发布
最新推荐文章于 2024-06-24 13:53:50 发布
阅读量2w 收藏 1
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010513756/article/details/48136445
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="message"></p>
	</body>
	<script type="text/javascript">
		var message = document.getElementById("message");
		var count = 1000;
		function animate() {
			var start = +new Date();
			message.innerHTML = count--;
			var finish = +new Date();
			setTimeout(animate, 1000 - (finish-start));
			
		}
		animate();
	</script>
</html>

本例实现了倒数1000秒的功能，我们在使用setTimeout的时候如果要一个函数每每隔1秒执行一次就会这样写

setTimeout(animate, 1000);
但是这样会忽略animate方法本身的运行时间，所以我们可以在执行animate方法的时候计算这个方法主要的语句的执行时间，之后在setTimeout中减去那个由于运行语句而耽搁的时间，从而实现更加精确的计时


_Slience_
关注
专栏目录
JavaScript中停止执行setInterval和setTimeout事件的方法
10-24
JavaScript中停止执行setInterval和setTimeout事件的方法主要涉及到了JavaScript编程中定时任务的管理和控制。在Web开发过程中，setInterval和setTimeout是两个非常常用的JavaScript函数，用于按照指定的周期执行...
关于实现setTimeout准时性的探讨
cpa0701的博客
04-22 767
目录背景whileWeb WorkerrequestAnimationFramesetTimeout 系统时间补偿 背景 运行代码如下，通过一个计数器来记录每一次 setTimeout 的调用，而设定的间隔 * 计数次数，就等于理想状态下的延迟，通过以下例子来查看我们计时器的准确性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</
setTimeout 最小执行时间是多少?
weixin_60409964的博客
05-26 788
因为 HTML 5 规定的内容。最小执行时间是 4ms。最小执行时间 10ms。
4种方案详解如何实现准时的setTimeout
最新发布
2401_84619287的博客
06-24 891
想得到准确的，我们第一反应就是如果我们能够主动去触发，获取到最开始的时间，以及不断去轮询当前时间，如果差值是预期的时间，那么这个定时器肯定是准确的，那么用 while 可以实现这个功能。我们通过在 worker 中写入一个 while 循环，当达到我们的预取时间的时候，再向主线程发送一个完成事件，就不会因为主线程的其他代码的干扰而造成数据不准的情况。当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。
js中setTimeout定时器不准的原因，以及修正的办法
qq_17335549的博客
12-01 3881
js中setTimeout定时器不准的原因，以及修正的办法
JS - setTimeout时间误差解决办法
weixin_42365757的博客
03-28 3416
JS - setTimeout时间误差解决办法 一、背景 最近项目中加了一个计时器，我是用setTimeout来实现计时的，用于显示订单剩余支付时间，但我发现，短时间还好，时间长了，计时器的误差会很大。 二、问题 用setTimeout实现计时 var start = new Date().getTime() var count = 0 // 程序执行了秒数 增加 var inits = 1000 // 间隔时间 var timer = setTimeout(fun,inits) console.
详解setTimeout()
热门推荐
Moments
01-30 3万+
前言：看了这篇文章，1.注意setTimeout引用的是全部变量还是局部变量了，当直接调用外部函数方法时，实际上函数内部的变量已经变成全局。2.提醒我防止出错的，用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比当前队列的函数慢执行，在他们的后面。5.setTimeout中的定时器并不是准确的时间，实际中它需要在执行完前面的函数后才定时执行。 你还可以查阅关于setTimeout的相关介绍 JavaScript提供定时执行代码的功能，叫做定时器（tim
Jquery中使用setInterval和setTimeout的方法
12-10
在JavaScript和jQuery中，`setInterval` 和 `setTimeout` 是两个非常重要的函数，它们用于安排代码在特定时间点或间隔执行。在jQuery中，虽然它们的使用方式与原生JavaScript基本相同，但可以通过jQuery的扩展来使...
JavaScript学习笔记整理_setTimeout的应用
10-21
在JavaScript编程中，`setTimeout`是一个非常重要的函数，用于在指定的毫秒数后执行一个函数或指定的代码。在本篇学习笔记中，我们将深入探讨`setTimeout`的应用及其相关概念。 首先，`setTimeout(f, n)`接收两个...
JavaScript计时器用法分析【setTimeout和clearTimeout】
11-29
JavaScript中的计时器是网页动态效果和异步编程的关键组件，它们允许我们在特定的时间间隔后执行某些代码。本文主要分析了两种主要的计时器函数：`setTimeout` 和 `clearTimeout`。 `setTimeout` 函数用于在指定的...
快速掌握Node.js中setTimeout和setInterval的使用方法
10-22
值得注意的是，setTimeout和setInterval的执行时间并非绝对精确，因为它们依赖于Node.js的事件循环机制，而事件循环受到多种因素的影响。这包括其他正在运行的代码、系统负载以及Node.js进程内部的其他事件。在某些...
setTimeout的最小执行时间是多少？
qq_59068526的博客
10-14 326
setTimeout的最小执行时间是多少？
setTimeout 不准时原因及 弥补办法
卡卡西：一个擅长拷贝的前端程序员
04-29 5105
在使用 setTimeout() 时，一般都会比设定的时间要稍微长一点，即使是 setTimeout(fn, 0) 也不会立即执行。造成这种问题的根本原因是： 最小延迟时间。 有很多因素会导致setTimeout的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。 最小延时 >= 4ms 在浏览器中，setTimeout()/setInterval()的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函.
怎样解决setTimeout执行时间不准确的问题？
zw_wen的博客
12-15 784
怎样解决setTimeout执行时间不准确的问题
为什么会出现 SETTIMEOUT 倒计时误差
高先生的猫
06-20 314
setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关。
前端如何实现精准的倒计时（排除误差、时间偏差）
weixin_55846296的博客
06-30 7310
前端倒计时的功能在很多业务场景都可以用到，比如活动开始、结束、秒杀倒计时等等等…我最近在处理流程审批及合同签署的项目，也涉及到倒计时功能，但在开发过程中遇到一些麻烦和坑点，下面和大家分享一下最后是如何解决的：正常来说，定时器功能主要由和这两个函数来完成，它们的内部运行机制完全一样，是将指定的代码移出本轮事件循环，等到下一轮事件循环，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就继续等待。（区别在于前者指定的代码是一次性执行，后者则为反复执行。）setInterval指定的是“开始执行”之间
如何解决setTimeout 倒计时误差
曹豆芽
03-16 2424
setTimeout 倒计时误差 JS 是单线程的，所以 setTimeout 的误差其实是无法被完全解决的，原因有很多，可能是回调中的，有可能是浏览器中的各种事件导致。这也是为什么页面开久了，定时器会不准的原因，当然我们可以通过一定的办法去减少这个误差。 // 以下是一个相对准备的倒计时实现 var period = 60 * 1000 * 60 * 2 var startTime = new ...
前端进阶之setTimeout 倒计时为什么会出现误差？
jean_0920的博客
09-19 3097
前端进阶之setTimeout 倒计时为什么会出现误差？
你可能不知道的5个setTimeout冷知识
高先生的猫
05-27 2638
你可能不知道的5个setTimeout冷知识 作为一名合格的程序员，想必大家对 setTimeout 并不陌生。它就是一个定时器，可以指定一个函数在多少毫秒后执行；它会返回一个定时器的编号，可以通过 clearTimeout 手动清除这个定时器。 在这里我不会重复介绍 setTimeout 是一个宏任务，是 JavaScript 执行异步函数的方法，也不会用它来实现一个符合 Promises/A+ 规范的 Promise。因为这些都太基础、太简单了！今天我要介绍的可能是你还不知道的setTimeout.
JavaScript定时器深入理解：setTimeout与setInterval
在JavaScript中，定时器是用于在特定时间间隔后执行代码的重要工具。它们分为两种类型：`setTimeout` 和 `setInterval`，两者都属于`window`对象的方法。这些方法在创建动态效果、延迟执行任务以及定期更新内容等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值