前端如何让倒计时更准确

受限于js的单线程模式，使用定时器实现倒计时会出现一定程度的时间差，若存在比较耗时的其他任务的话，差值往往是不可接受的，一下分享一种使用setTimeout实现的倒计时效果，思路就是通过引入计数器，判断计时器延迟执行的时间来调整，尽量让误差缩小，不同浏览器不同时间段打开页面倒计时误差可控制在 1s 以内。

以下是代码实现：

// 开始线程占用
window.setInterval(function () {
var j = 0;
while(j++ < 100000000);
}, 0);

//倒计时
const interval = 1000;
var ms = 50000, // 倒计时时间差，这里测试用50000ms
count = 0,
startTime = new Date().getTime();
if (ms >= 0) {
var timeCounter = window.setTimeout(countDownStart, interval);
}

function countDownStart() {
count++;
var offset = new Date().getTime() - (startTime + count * interval);
var nextTime = interval - offset;
var daytohour = 0;

if (nextTime < 0) {
nextTime = 0
};

ms -= interval;

console.log("误差：" + offset + "ms，距离下一次执行：" + nextTime + "ms后，距离活动开始还有：" + ms + "ms");

if (ms < 0) {
    window.clearTimeout(timeCounter);
} else {
    timeCounter = window.setTimeout(countDownStart, nextTime);
}
}

由于线程阻塞延迟问题，做了 setTimeout 执行时间的误差修正，保证 setTimeout 执行时间一致。若冻结时间特别长的，可以在此基础上扩展处理

前端如何让倒计时更准确相关推荐

前端显示服务器时间,前端展示活动倒计时使用服务器时间
获取服务器时间,可以从请求头里去取,也就是这个具体获取方法是这样的请原谅我放荡不羁不爱打字,因为我不知道那些大神们是怎么把代码粘进来的由于服务器获取的是英文时间,所以有八个小时的时差,也就是会比 ...
前端处理订单倒计时显示问题
前言项目中有下图这样一个显示倒计时的需求,需要实现: 一开始想法是需要接口返回到期时间戳减去客户端当前时间 ,然后计算出要显示倒计时剩余时间 :最后感觉用客户端时间会不准确,可能会出现服务器 ...
前端 javaScript 新年倒计时
实现思路: 利用当前时间的毫秒数与新年时间的毫秒数对比实现倒计时封装了3个相对独立的过滤器配合使用更换时间可以直接改平安夜倒计时:const ms2023 = new Date(2023,11, ...
前端页面实现倒计时效果的几种方法
倒计时的效果在网站或其他平台剪得很多了吧,今天就让我们来看看实现它的几种方法吧! 一 --15分钟倒计时 <html> <head> <meta charset=&quo ...
【转】前端验证码倒计时、后台发送验证码、创蓝短信接口
前端代码:倒计时 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
前端验证码倒计时、后台发送验证码、创蓝短信接口
前端代码:倒计时 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
html+css+js制作时间倒计时（时分秒）简易版
效果图展示: 1.先了解获取时间的函数 Date():获取当前系统时间 //获取当前系统时间 var date = new Date(); 2.获取时间的方法 getHours():获取小时值 get ...
VUE倒计时刷新页面不影响
前端强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时* VUE 倒计时刷新页面也存在 (持续更新) 不多BB 直接上代码活用 localStorage 机制 (VUE+webpack版 ...
RabbitMQ实现订单超时设计思路、以及在订单过期临界点支付成功如何处理
场景: 我们知道用 RabbitMQ 的延时队列可以实现用户下单后在 xxx 时间内未支付,需要自动关闭订单.但如果用户在订单即将过期的最后一秒支付成功.那么这笔订单算不算正常下单?要不要释放库存? ...

前端如何让倒计时更准确

前端如何让倒计时更准确相关推荐

最新文章

热门文章