电商类网站开发,长沙建站位找有为太极广大,做网站设计挣钱吗,网站开发客户需求背景
最近在做一个倒计时时#xff0c;发现当切换浏览器tab后#xff0c;再切回倒计时页面#xff0c;倒计时的数据不准#xff0c;比真正的剩余时间多#xff0c;短时间还好#xff0c;时间长了#xff0c;计时器的误差会很大。
原因
倒计时是用setInterval每1000毫…背景
最近在做一个倒计时时发现当切换浏览器tab后再切回倒计时页面倒计时的数据不准比真正的剩余时间多短时间还好时间长了计时器的误差会很大。
原因
倒计时是用setInterval每1000毫秒触发一次。
在进入页面时计算剩余时间把剩余时间用setInterval每1000毫秒触发一次进行减法。
但是由于浏览器的优化机制为了更极致的优化在切换tab之后浏览器会把setInterval的执行效率降低在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。那么这时候就不是1000毫秒减一次了所以会有误差。
用setInterval实现计时
var start new Date().getTime(), count 0;
var interval setInterval(function () {countconsole.log(new Date().getTime() - (start count * 1000) ms)if(count 10){clearInterval(interval);}
}, 1000)可以看到我打印的new Date().getTime() - (start count * 1000) 也就是每次计时的误差理想情况下应该是0。
用setTimeout实现计时
var start new Date().getTime(), count 0,interval 1000;
var timer setTimeout(doFunc,interval);
function doFunc(){countconsole.log(new Date().getTime() - (start count * 1000) ms);if(count 10){timer setTimeout(doFunc,interval);}
}也是一样的会出现误差
setInterval、setTimeout误差的不同之处
setInterval指定的是“开始执行”之间的间隔并不考虑每次任务执行本身所消耗的时间。因此实际上两次执行之间的间隔会小于指定的时间。比如setInterval指定每 100ms 执行一次每次执行需要 5ms那么第一次执行结束后95毫秒第二次执行就会开始。如果某次执行耗时特别长比如需要105毫秒那么它结束后下一次执行就会立即开始。
为了确保两次执行之间有固定的间隔可以不用setInterval而是每次执行结束后使用setTimeout指定下一次执行的具体时间。
模拟阻塞事件
setInterval
//阻塞代码
setInterval(function () {var n 0while (n 1000000000);
}, 1000)var start new Date().getTime(), count 0;
var interval setInterval(function () {countconsole.log(new Date().getTime() - (start count * 1000) ms)if(count 10){clearInterval(interval);}
}, 1000)setTimeout
//阻塞代码
setInterval(function () {var n 0while (n 1000000000);
}, 1000)var start new Date().getTime(), count 0,interval 1000;
var timer setTimeout(doFunc,interval);
function doFunc(){countconsole.log(new Date().getTime() - (start count * 1000) ms);if(count 10){timer setTimeout(doFunc,interval);}
}可以看到加了一些阻塞线程的代码后误差越来越严重 在实际项目中执行计时器的同时会有很多其他异步阻塞事件会导致倒计时功能不精确。
解决方案
1、setInterval每次触发的时候重新计算剩余时间误差在一分钟以内
2、Web Workers这个在nuxt中引入会报错涉及到webpack改动较大暂时不用
3、进行误差修正也就是获取到误差的值并且根据这个误差值来动态调整我们执行回调的间隔时间
计算误差值动态调整执行setTimeout的间隔
加上动态误差修正
var start new Date().getTime(), count 0,interval 1000;
var offset 0;//误差时间
var nextTime interval - offset;//原本间隔时间 - 误差时间
var timer setTimeout(doFunc,nextTime);
function doFunc(){countconsole.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都会根据上次的误差值来动态调整以尽量减少整体的误差。
