大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
文章目录
一、背景
最近项目中加了一个计时器，我是用setInterval来实现计时的，用于显示订单剩余支付时间，但我发现，短时间还好，时间长了，计时器的误差会很大。
二、问题
我现在来模拟一下这个问题
1.用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)
可以看到，我打印的new Date().getTime() – (start + count * 1000) ，
也就是每次计时的误差，理想情况下，应该是0。
2.用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);
}
}
也是一样的会出现误差
三、分析
1.出现误差的原因
setInterval、setTimeout实现都会出现误差，这源于js的单线程。
他们的回调函数并不是到时后立即执行，而是等系统计算资源空闲下来后才会执行。
setInterval、setTimeout都属于宏任务。
有关事件循环机制的内容，可参考文章
JavaScript中的Event Loop(事件循环)机制(含图解)
2.setInterval、setTimeout误差的不同之处
setInterval指定的是“开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。
为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。
四、模拟阻塞事件
现在来模拟一下，加一些阻塞线程的代码试试
1.setInterval
如：
//阻塞代码
setInterval(function () {
var n = 0
while (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)
2.setTimeout
//阻塞代码
setInterval(function () {
var n = 0
while (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);
}
}
可以看到加了一些阻塞线程的代码后，误差越来越严重，
在实际项目中，执行计时器的同时，会有很多其他异步阻塞事件，会导致倒计时功能不精确。
四、解决方案
我们需要进行误差修正，也就是获取到误差的值，并且根据这个误差值来动态调整我们执行回调的间隔时间
- 计算误差值
- 动态调整执行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);
}
}
试试效果：
我把每次的nextTime打印出来看看：
可以看到每次的nextTime都会根据上次的误差值来动态调整，以尽量减少整体的误差。
拓展
最近发现一个新的问题，
切换页面导致计时器停止，setInterval切换页面后不执行
原因：
因为浏览器的优化原因，setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。
解决方案：
准备用 Web Workers 去做一个优化。
Web WorkersWeb Workers 是 HTML5
提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。
参考
https://blog.csdn.net/lhz_333/article/details/105678627
本文链接https://blog.csdn.net/qq_39903567/article/details/115392972
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/188868.html原文链接：https://javaforall.net
