引言
本文解说倒计时为什么倡议应用setTimeout而不应用setInterval，倒计时为什么存在误差，以及如何解决。
倒计时器
在前端开发中，倒计时器性能比拟常见，比方流动倒计时，假设只有10秒，比拟常见的两种写法如下：
//setTimeout实现形式
var countdownTime = 10; //倒计时秒数
var countdown = function() {
var setTimeoutHandler = setTimeout(function () {
countdownTime -- ;
console.log('倒计时：' + countdownTime + ' 秒');
if(countdownTime === 0) {
console.log('倒计时完结！');
clearTimeout(setTimeoutHandler);
}else {
countdown();
}
}, 1000)
};
countdown();//setInterval实现形式
var countdownTime = 10; //倒计时秒数
var countdown = function() {
var setIntervalHandler = setInterval(function () {
countdownTime -- ;
console.log('倒计时：' + countdownTime + ' 秒');
if(countdownTime === 0) {
console.log('倒计时完结！');
clearInterval(setIntervalHandler);
}
}, 1000)
};
countdown();控制台打印都是一样的：
剖析下面的两种写法，第一种应用setTimeout形式，countdown递归函数调用，第二种应用setInterval形式。
setInterval 办法可依照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout 办法用于在指定的毫秒数后调用函数或计算表达式。
置信大家对这两个函数的用法都是比拟理解的，都能够实现倒计时性能，且setInterval函数的周期调用个性更合乎倒计时的业务场景，但事实真的是这样么？
setTimeout与setInterval
那么问题来了，是应用setTimeout还是setInterval，还是两个都能够？
setInterval执行机制
JavaScript高级程序设计（第三版）对于工夫距离形容：
设定一个 150ms 后执行的定时器不代表到了 150ms 代码就立即执行，它示意代码会在 150ms 后被退出到队列中。如果在这个工夫点上，队列中没有其余货色，那么这段代码就会被执行。
带着这段形容，咱们设定执行代码setInterval(func, interval)，func函数执行工夫为1s，interval工夫距离为0.5s，那么这段代码的执行流程图如下：
0s时，setInterval函数触发，期待0.5s后，func第1次退出到事件队列中，并在0.5-1.5s期间执行了1s。
因为工夫距离为0.5s，所以在1s时func第2次退出到队列中，但此时JS引擎解决形式是：当应用setInterval时，仅当没有该定时器的任何其余代码实例时，才将定时器代码增加到队列中。因为在1s时，第1次退出队列的func还在执行，所以无奈胜利将func退出队列中，这就呈现了丢帧景象。
工夫又过了0.5s，在1.5s时，func第3次退出到队列中，此时第1次退出到队列中func刚执行结束，第3次func可胜利退出到队列中并开始执行。此时暴露出setInterval另一个问题，两次func执行的工夫距离远小于0.5s，代码的执行距离比设定的距离要小。
setTimeout执行机制
那么同样的性能，应用setTimeout又会是什么景象呢，代码片段：
setTimeout(function(){
//do something
//arguments.callee 获取对以后执行的函数的援用，在ES5严格模式中已废除。
setTimeout(arguments.callee, interval);
},interval)func函数执行工夫为1s，interval工夫距离为0.5s，代码的执行流程图如下：
0s时，setTimeout函数触发，期待0.5s后，func第1次退出到事件队列中，并在0.5-1.5s期间执行了1s。
1.5s时func执行完结，第二个setTimeout函数被触发，期待0.5s后，func第2次退出到队列中，并在2s – 2.5s期间执行了1s。
两次func执行距离与设定的interval 0.5s统一，且不会呈现丢帧的景象。
如何抉择
通过setTimeout和setInterval两个函数的执行机制来看，setInterval存在两个问题：
- 丢帧，如果JS队列中曾经有一个它的实例，就不会向队列中增加事件，所以这次的事件执行就会失落。
- 两次的事件执行工夫距离变小甚至无距离，以后事件执行完后，马上就会执行队列中已增加的事件。
所以，应用setTimeout，而不应用setInterval。
倒计时误差
倒计时器是存在误差的，咱们做个测试，一看便知：
var countIndex = 1; //倒计时工作执行次数
const timeout = 1000; //工夫距离1秒
const startTime = new Date().getTime();
countdown(timeout);
function countdown(interval) {
setTimeout(function () {
const endTime = new Date().getTime();
//误差
const deviation = endTime - (startTime + countIndex * timeout);
console.log('第'+ countIndex +'次：累计误差 '+ deviation + ' ms');
countIndex ++ ;
//执行下一次倒计时
countdown(timeout);
}, interval)
}控制台打印：
这段代码的作用是，计算出每次定时器完结工夫和开始工夫加上总轮询的工夫的差值，也就是累计的误差。能够从控制台打印信息看出，均匀每秒存在2ms的误差值。尽管每次误差值都不大，然而如果倒计时10分钟，最初就会差1.2秒，这在抢购秒杀的业务场景下是致命的BUG了。
如果你将浏览器切换Tab或者最小化一段时间后，再切回关上控制台看又会看到神奇的一幕：
打印第5次浏览器最小化，第10次时浏览器复原，能够看到从第6次到第9次浏览器最小化期间，每次偏差值是1000ms左右，等第11次浏览器复原后，每次偏差值又变回2ms左右。惊不惊喜，意不意外！
为什么会存在误差
存在2ms的误差是因为JS是单线程的，执行了setTimeout中的代码块耗时2ms左右，例子中的代码块没有简单逻辑就破费了2ms，可想而知在理论业务中必定要耗费更长时间，而且会随着计时器执行次数叠加，造成更大的误差。
而浏览器最小化后每次1000ms的误差是因为浏览器性能优化的一种机制。参考MDN中对于setTimeout的一段形容：
未被激活的tabs的定时最小提早>=1000ms
为了优化后盾tab的加载损耗（以及升高耗电量），在未被激活的tab中定时器的最小延时限度为1S(1000ms)。
Firefox 从version 5 (see bug 633421开始采取这种机制，1000ms的距离值能够通过
dom.min_background_timeout_value扭转。Chrome 从 version 11 (crbug.com/66078)开始采纳。
Android 版的Firefox对未被激活的后盾tabs的应用了15min的最小提早间隔时间 ，并且这些tabs也能齐全不被加载。
如何解决误差
倒计时器的误差是不可避免的，然而咱们能够通过误差值去调整每次执行的工夫距离：
var countIndex = 1; //倒计时工作执行次数
const timeout = 1000; //工夫距离1秒
const startTime = new Date().getTime();
countdown(timeout);
function countdown(interval) {
setTimeout(function () {
const endTime = new Date().getTime();
//误差
const deviation = endTime - (startTime + countIndex * timeout);
countIndex ++ ;
//执行下一次倒计时，去除误差的影响
countdown(timeout - deviation);
}, interval)
}执行下一次倒计时，去除误差的影响countdown(timeout - deviation)，这里咱们通过对下一次工作的调用工夫做了调整，后面提早了多少毫秒，那么咱们下一个工作执行就放慢多少毫秒，这就是解决倒计时误差的基本思路。
还有一种解决办法就是通过获取后盾服务器的工夫去校准倒计时，获取本地工夫实际上是不谨严的，new Date()获取到的工夫是本机系统的工夫，用户能够通过调整零碎工夫坑骗浏览器。所以通过获取服务器工夫校对是比拟靠谱的一种做法。
对于切换Tab浏览器倒计时器产生的大误差，解决思路是切回浏览器界面后，通过监听页面可见或被暗藏visibilitychange事件，获取最新的工夫，这样用户看到的就是没有误差的倒计时了。
document.addEventListener('visibilityChange', function() {
if (!document.hidden) {
// get newest time
}
});你学“废”了么？
文章首发于我的博客 echeverra，原创文章，转载请注明出处。
同时欢送关注我的微信公众号，一起学习提高！不定时会有资源和福利相送哦！
发表回复