setTimeout, setInterval 和 requestAnimationFrame

setTimeout

setTimeout 函数用于在一定延迟后执行一次指定的函数或代码块。它接受两个参数：要执行的函数或代码块以及延迟的毫秒数。 例如：

setTimeout(function () {
  console.log("Hello, world!");
}, 1000);

上述代码将在延迟 1000 毫秒（即 1 秒）后输出 “Hello, world!"。

setInterval

setInterval 函数用于按照指定的时间间隔重复执行一个函数或代码块。它也接受两个参数：要执行的函数或代码块以及时间间隔的毫秒数。 例如：

var count = 0;
var intervalId = setInterval(function () {
  count++;
  console.log("Count: " + count);
  if (count === 5) {
    clearInterval(intervalId); // 当计数达到5时停止循环
  }
}, 1000);

上述代码将每隔 1000 毫秒（即 1 秒）输出一次计数器的值，并在计数器达到 5 时停止。

requestAnimationFrame

requestAnimationFrame 是一个浏览器提供的用于执行动画的 API。它会在浏览器下一次重绘之前调用指定的回调函数，通常是每秒 60 次。这样可以确保动画在流畅的帧速率下运行，并避免过度占用 CPU 资源。 例如：

function animate() {
  // 执行动画逻辑
  requestAnimationFrame(animate);
}
animate();

上述代码会不断调用 animate 函数，从而实现一个持续的动画效果。

需要注意的是，setTimeout 和 setInterval 的执行时间并不是精确的，它们受到 JavaScript 引擎当前的负载和其他因素的影响。而 requestAnimationFrame 则会在浏览器合适的时机调用回调函数，通常能够提供更平滑的动画效果。因此，在执行动画时，推荐使用 requestAnimationFrame。