如何使用Web Animations API创建一个精确计时的时钟动画示例？

本文共计3629个文字，预计阅读时间需要15分钟。

目录正文JavaScript计时器问题低精度Web Animations API开始时间示例：精确计时总结正文在JavaScript中，当事件准实时发生时，很自然地会想到使用计时器函数。但是，当某件事发生时，又该如何处理呢？

目录

• 正文
• JavaScript 计时器问题
• 低精度
• Web Animations API
• 开始时间
• 示例：精确计时的时钟
• 总结

正文

在 JavaScript 中，当事情准时发生时，很自然地会想到使用计时器函数。 但是，当某件事由于其他事情依赖于它而在准确的时刻发生时，你很快就会发现计时器会存在一个不准时的问题。而本文所要介绍的 Web Animations API 可以在某些情况下替代计时器函数，同时保持精确。

当你需要处理精确的视觉呈现时，你就会发现你花费了太多时间来解决 JavaScript 无法准确解决代码何时实际执行的问题。

例如，下面就举了一个计时器准确性的问题。

JavaScript 计时器问题

在 JavaScript 中，每个任务都会经过一个队列。 包括你的代码、用户交互、网络事件等都会放入各自的任务队列，进行事件循环处理。 这么做能够保证任务按顺序发生。