JavaScript BOM 的时钟：控制浏览器的节奏

JavaScript BOM 时钟 定时器 计时器 计时事件

定时器

定时器允许您在指定的时间间隔后执行代码。可以使用 setTimeout() 函数创建定时器，该函数接受两个参数：一个包含要执行的代码的函数，以及一个以毫秒为单位的延迟时间。例如：

setTimeout(() => {
  console.log("代码在 3 秒后执行");
}, 3000);

计时器

计时器允许您跟踪自浏览器加载以来经过的毫秒数。可以使用 setInterval() 函数创建计时器，该函数接受与 setTimeout() 相同的两个参数。但是，计时器不会在指定时间后停止，它会不断以指定的间隔执行代码，直到明确清除为止。例如：

setInterval(() => {
  console.log("代码每秒执行一次");
}, 1000);

清除计时器

要清除定时器或计时器，可以使用 clearTimeout() 或 clearInterval() 函数，并提供其对应的计时器 ID 作为参数。例如：

const timerId = setInterval(() => {
  console.log("代码每秒执行一次");
}, 1000);

// 10 秒后清除计时器
setTimeout(() => {
  clearInterval(timerId);
}, 10000);

演示代码

为了更好地理解 BOM 时钟 API 的用法，以下是一个演示代码示例，展示了如何创建和使用定时器和计时器：

// 创建一个定时器，在 3 秒后显示一条消息
const timeoutId = setTimeout(() => {
  console.log("定时器在 3 秒后执行");
}, 3000);

// 创建一个计时器，每秒显示一次消息
const intervalId = setInterval(() => {
  console.log("计时器每秒执行一次");
}, 1000);

// 清除定时器和计时器
setTimeout(() => {
  clearTimeout(timeoutId);
  clearInterval(intervalId);
}, 10000);

应用场景

BOM 时钟 API 可以用于各种应用场景，包括：

• 创建动态更新的时钟或倒计时
• 在特定时间间隔后执行任务
• 根据用户交互触发计时事件
• 控制动画和过渡

通过利用 BOM 时钟 API 的功能，您可以轻松地控制浏览器中的时间，从而创建响应式且引人入胜的 web 应用程序。