JavaScript 提供了两种常用的计时功能：setTimeout() 和 setInterval()。它们可以在指定的延迟后执行代码，或者按固定时间间隔反复执行代码。你可以使用这些方法来实现延时执行、周期性执行等功能。

1. setTimeout() 方法

setTimeout() 方法用于在指定的延迟时间（以毫秒为单位）后执行一个函数一次。它是执行延时操作的基本方法。

语法：

let timeoutID = setTimeout(function, delay);

• function：要执行的回调函数。
• delay：延迟执行的时间，单位是毫秒。

示例：

setTimeout(function() {
  console.log("This message is displayed after 2 seconds.");
}, 2000);  // 2000 毫秒 = 2 秒

效果：
在 2 秒后，控制台打印出 “This message is displayed after 2 seconds.”

返回值：
setTimeout() 返回一个唯一的 ID（timeoutID），可以用来取消定时器。

取消 setTimeout() 定时器：

let timeoutID = setTimeout(function() {
  console.log("This message won't be displayed.");
}, 2000);

clearTimeout(timeoutID);  // 在 2 秒之前取消定时器

2. setInterval() 方法

setInterval() 方法用于每隔指定的时间间隔（以毫秒为单位）反复执行一个函数，直到明确停止它。

语法：

let intervalID = setInterval(function, interval);

• function：要执行的回调函数。
• interval：时间间隔，单位是毫秒。

示例：

let counter = 0;

let intervalID = setInterval(function() {
  console.log("This message is displayed every 2 seconds.");
  counter++;

  if (counter >= 5) {
    clearInterval(intervalID);  // 停止定时器
    console.log("Interval stopped.");
  }
}, 2000);  // 每 2 秒执行一次

效果：
每 2 秒输出一次 “This message is displayed every 2 seconds.”，直到执行 5 次后，输出 “Interval stopped.” 并停止定时器。

返回值：
setInterval() 返回一个唯一的 ID（intervalID），可以用来取消定时器。

取消 setInterval() 定时器：

let intervalID = setInterval(function() {
  console.log("This message won't be displayed.");
}, 2000);

clearInterval(intervalID);  // 立即取消定时器

3. setTimeout() 与 setInterval() 的比较

• setTimeout()：用于执行一次性的延时操作。
• setInterval()：用于按固定时间间隔执行多次操作，直到明确取消。

4. setTimeout() 与 setInterval() 的嵌套

你可以将 setTimeout() 嵌套在 setInterval() 中，或者反之，根据具体需求执行更复杂的计时逻辑。例如，利用 setTimeout() 模拟类似于 setInterval() 的周期性任务：

let counter = 0;

function repeatTask() {
  console.log("This message is displayed every 2 seconds.");
  counter++;

  if (counter < 5) {
    setTimeout(repeatTask, 2000);  // 递归调用实现周期性任务
  } else {
    console.log("Task completed.");
  }
}

setTimeout(repeatTask, 2000);  // 首次延迟 2 秒

5. performance.now() 用于精确计时

如果你需要更高精度的时间计算，可以使用 performance.now() 方法。它返回自浏览器启动以来的时间（以毫秒为单位），并且精度高于 Date.now()，通常用于测量代码执行时间或优化性能。

示例：

let startTime = performance.now();

setTimeout(function() {
  let endTime = performance.now();
  console.log("The operation took " + (endTime - startTime) + " milliseconds.");
}, 2000);

效果：
在 2 秒后输出操作的执行时间，精确到小数点后几位。

6. 常见应用场景

• 延时执行：使用 setTimeout() 延迟执行某个操作。
• 周期性执行：使用 setInterval() 定期执行某些任务，如轮询、动画、计时器等。
• 动态内容更新：例如，创建一个自动轮播的图像或文章。
• 逐步动画：通过递归调用 setTimeout() 来实现逐步动画效果。

7. 总结

• setTimeout()：用于延迟一次性执行。
• setInterval()：用于重复执行某个任务，直到调用 clearInterval() 停止。
• 取消计时器：clearTimeout() 和 clearInterval() 用于取消相应的计时器。
• 性能优化：performance.now() 提供更高精度的计时功能。

计时事件是 JavaScript 中非常重要的工具，可以实现许多动态交互、动画和周期性任务。掌握这些方法，能够帮助你更好地控制时间和延迟，提供更丰富的用户体验。更多其他内容请关注其他相关文章。