JavaScript 定时器

在 JavaScript 中，我们可以使用定时器来延迟执行代码或定期执行代码。本文将介绍 JavaScript 中的三种定时器：setTimeout、setInterval 和 requestAnimationFrame，以及它们的用途和使用方法。

setTimeout

setTimeout 方法允许我们延迟一段时间执行一段代码。它接收两个参数：要执行的函数和延迟的时间（以毫秒为单位）。例如：

const delay = 1000; // 延迟 1 秒
setTimeout(() => {
  console.log('这段代码会在 1 秒后执行');
}, delay);

setTimeout 方法返回一个计时器 ID，我们可以使用 clearTimeout 方法来取消这个计时器。例如：

const delay = 1000; // 延迟 1 秒
const timerId = setTimeout(() => {
  console.log('这段代码会在 1 秒后执行');
}, delay);

clearTimeout(timerId); // 取消计时器

setInterval

setInterval 方法允许我们定期执行一段代码。它接收两个参数：要执行的函数和执行的时间间隔（以毫秒为单位）。例如：

const interval = 1000; // 每隔 1 秒执行一次
setInterval(() => {
  console.log('这段代码会每隔 1 秒执行一次');
}, interval);

setInterval 方法返回一个计时器 ID，我们可以使用 clearInterval 方法来取消这个计时器。例如：

const interval = 1000; // 每隔 1 秒执行一次
const timerId = setInterval(() => {
  console.log('这段代码会每隔 1 秒执行一次');
}, interval);

clearInterval(timerId); // 取消计时器

requestAnimationFrame

requestAnimationFrame 方法允许我们按照浏览器的刷新率调用一段代码。它接收一个函数作为参数。例如：

function animate() {
  console.log('这段代码会在下一次浏览器刷新时执行');
  requestAnimationFrame(animate);
}

animate();

requestAnimationFrame 方法返回一个计时器 ID，我们可以使用 cancelAnimationFrame 方法来取消这个计时器。例如：

function animate() {
  console.log('这段代码会在下一次浏览器刷新时执行');
  const timerId = requestAnimationFrame(animate);
  
  cancelAnimationFrame(timerId); // 取消计时器
}

animate();

总结

setTimeout、setInterval 和 requestAnimationFrame 都是 JavaScript 中很有用的定时器。setTimeout 和 setInterval 主要用于延迟或定期执行代码，而 requestAnimationFrame 则用于按照浏览器刷新率调用代码。在使用定时器时，我们应该注意内存泄漏和取消计时器的方法。