setTimeout不准时，CSS精准实现计时器功能

实际开发过程中，我们会经常遇到，首次进入页面进行相应提示，然后指定时间后自动消失或者前端时钟展示等需求。

按照传统方案，我们可以使用 setTimeout 实现。但其存在：实际延时比设定值更久的情况。

setTimeout 不准时

有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久。

最小延时 >= 4ms

5. If nesting level is greater than 5, and timeout is less than 4, then set timeout to 4. – HTML5 spec Timers

在浏览器中，由于函数嵌套到一定深度，会导致被阻塞。

function cb() { setTimeout(cb, 0)
}
setTimeout(cb, 0)

未被激活的 tabs 的定时最小延迟>=1000ms

为了优化 tab 的加载损耗（以及降低耗电量），在未被激活的 tab 中定时器的最小延时限制为 1S（1000ms）。

超时延迟

除了"最小延时"之外，定时器仍然有可能因为当前页面（或者操作系统/浏览器本身）被其他任务占用导致延时。

需要被强调是，直到调用 setTimeout()的主线程执行完其他任务之后，回调函数和代码段才能被执行。

最大延时值

包括 IE、Chrome、Safari、Firefox 在内的浏览器其内部以 32 位带符号整数存储延时。这就会导致如果一个延时 (delay) 大于 2147483647 毫秒 (大约 24.8 天) 时就会溢出，导致定时器将会被立即执行。-- setTimeout/setInterval delay数值过大问题

打破 4ms 的限制

如果想在浏览器中实现 0ms 延时的定时器，可以尝试下述方法

(function() {var timeouts = [];var messageName = "zero-timeout-message";function setZeroTimeout(fn) {timeouts.push(fn);window.postMessage(messageName, "*");}function handleMessage(event) {if (event.source == window && event.data == messageName) {event.stopPropagation();if (timeouts.length > 0) {var fn = timeouts.shift();fn();}}}window.addEventListener("message", handleMessage, true);window.setZeroTimeout = setZeroTimeout;
})();

CSS更准时

如果要实现特别准时的业务场景（如，时钟）。显然 setTimeout/setInterval 不是最佳实践，如何避免同步阻塞卡顿，是突破该问题的重要一点。

这里，使用 css 动画来实现，css 动画有几个显著的优点：

1. 不依赖 javascript，且有成熟的相关 api；
2. 运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅；
3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

属性	说明	示例
animation-name	指定应用的一系列动画	animation1,animation2
animation-duration	指定一个动画周期的时长，单位 s 或者 ms	60s
animation-timing-function	在每一动画周期中执行的节奏	ease、linear、steps(60)
animation-delay	定义动画于何时开始，单位 s 或者 ms	100ms
animation-iteration-count	定义动画在结束前运行的次数	infinite（无限次）、3
animation-direction	指示动画是否反向播放	normal、alternate、reverse
animation-fill-mode	设置 CSS 动画在执行之前和之后如何将样式应用于其目标	forwards、backwards
animation-play-state	定义一个动画是否运行或者暂停	running、paused

animation: timer 60s infinite steps(60) forwards;

steps(number_of_steps, direction)：定义了一个阶梯函数，将输出值的域等距地划分。

通过 自定义数据属性 绑定要显示的值。这样在 css 中，可以通过表达式 attr() 用来获取值。

<div class="container"><p data-seconds="00 01 02 03 04 05 06 07 08 09"></p>
</div>

通过伪元素显示当前值（每次只显示1个），然后动画周期的时长 10s ，等距划分为10步。

每 1s 中移动向量的纵坐标。

.container p {height: 68px;width: 68px;line-height: 68px;overflow: hidden;
}
.container p::after {display: block;content: attr(data-seconds);animation: timer 10s infinite steps(10) forwards;
}@keyframes timer {from {transform: translate3d(0, 0, 0);}to {transform: translate3d(0, -100%, 0);}
}