精确到秒的时钟：使用 Web Animations API 构建精准计时器

2023-11-09 08:08:28

引言

在网页开发中，我们经常需要在特定的时间触发某些事件，例如播放音频、更新数据、显示动画等。传统上，我们使用 JavaScript 的计时器函数来实现这一目的，但计时器函数存在一个不准时的问题，即它无法保证在指定的时间触发事件。这主要是因为计时器函数依赖于浏览器的事件循环，而事件循环是一个异步的处理机制，它不能保证在指定的时间执行代码。

为了解决计时器函数的不准时问题，我们可以使用 Web Animations API 来构建一个精确到秒的时钟。Web Animations API 是一个 JavaScript API，它允许我们创建和控制动画。与计时器函数不同，Web Animations API 并不依赖于事件循环，因此它可以保证在指定的时间触发事件。

实现步骤

1. 创建一个新的动画

const animation = new Animation({
  duration: 1000, // 动画持续时间，单位为毫秒
  iterations: Infinity, // 动画重复次数，设置为 Infinity 表示无限重复
});

2. 将动画添加到时钟元素

const clock = document.getElementById('clock');
clock.animate(animation);

3. 在动画的事件侦听器中更新时钟

animation.addEventListener('iterationstart', () => {
  // 在每次动画迭代开始时更新时钟
  const date = new Date();
  clock.textContent = date.toLocaleTimeString();
});

4. 启动动画

animation.play();

完整代码

const clock = document.getElementById('clock');

const animation = new Animation({
  duration: 1000, // 动画持续时间，单位为毫秒
  iterations: Infinity, // 动画重复次数，设置为 Infinity 表示无限重复
});

animation.addEventListener('iterationstart', () => {
  // 在每次动画迭代开始时更新时钟
  const date = new Date();
  clock.textContent = date.toLocaleTimeString();
});

clock.animate(animation);

animation.play();