您现在的位置是：网站首页> 编程资料编程资料

Web Animations API实现一个精确计时的时钟示例_JavaScript_

2023-05-24 408人已围观

简介 Web Animations API实现一个精确计时的时钟示例_JavaScript_

正文

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

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

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

JavaScript 计时器问题

在 JavaScript 中，每个任务都会经过一个队列。包括你的代码、用户交互、网络事件等都会放入各自的任务队列，进行事件循环处理。这么做能够保证任务按顺序发生。例如，当事件触发或计时器到期时，你在回调中定义的任务将进入到队列。一旦事件循环轮到了它，你的代码就会被执行。

可是，当在任务队列中执行计数器函数时，问题就会暴露了。

低精度

在将任务放入队列之前，我们可以准确定义超时应该等待多长时间。但是，我们无法预测的是目前队列中会出现什么。这是因为 setTimeout 保证在将事物放入队列之前的最小延迟。但是没有办法知道队列中已经有什么。

曾经我不得不为一个网站实现随机翻转图块，其中一个错误是由休眠标签引起的。因为每个图块都有自己的计时器，所以当标签激活时，它们都会同时触发。那个案例如下代码所示：

Timeouts
Animations

#demo { display: flex; background-color: white; color: black; flex-flow: column nowrap; align-items: center; padding: 2rem; gap: 2rem; } .row { display: flex; gap: 0.5rem; } .square { display: flex; width: 5rem; height: 5rem; position: relative; transform-style: preserve-3d; } .square > * { flex: 1 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: green; } .square > *:last-child { background-color: rgb(227, 227, 0); position: absolute; width: 100%; height: 100%; transform: rotateY(0.5turn); }

(function () { "use strict"; const flip_keyframe = { transform: [ "rotateX(0turn)", "rotateX(0.5turn)", ] }; const timing_options = { duration: 1000, fill: "forwards" } function create(element) { const animation = element.animate(flip_keyframe, timing_options); animation.pause(); return animation; } function reset(animation) { animation.pause(); animation.currentTime = 0; } const id = "demo"; const demo = document.getElementById(id); const sections = demo.querySelectorAll("section"); const first_row_animations = Array.from( sections[0].lastElementChild.children ).map(create); const second_row_animations = Array.from( sections[1].lastElementChild.children ).map(create); const button = document.querySelector("button"); button.addEventListener("click", function (event) { const start_time = document.timeline.currentTime; first_row_animations.forEach(reset); second_row_animations.forEach(reset); first_row_animations.forEach(function (animation, index) { setTimeout(function () { animation.play(); }, 250 * index); }); second_row_animations.forEach(function (animation, index) { animation.startTime = start_time + (250 * index); }); setTimeout(function () { const start = Date.now(); while (Date.now() - start < 400) {} }, 500); }); }());

为了解决这个问题，我想到了 Web Animations API。