JavaScript 中的定时器：setTimeout 和 setInterval

在 JavaScript 编程中，我们经常需要在特定的时间后执行代码，或者以固定的时间间隔重复执行代码。这就是定时器的用武之地。本文记录setTimeout和setInterval这两个强大的定时器函数的学习笔记。

setTimeout：延迟执行

setTimeout函数允许我们在指定的毫秒数后执行一个函数。它的基本语法如下：

let timerId = setTimeout(function|code, [delay], [arg1], [arg2], ...);

• function|code：要执行的函数或代码字符串。
• delay：延迟时间，以毫秒为单位，默认为 0。
• arg1, arg2, …：传递给函数的参数。

示例：

function sayHi() {
  alert("Hello");
}
setTimeout(sayHi, 1000);

在上面的示例中，sayHi函数将在 1 秒后被调用。

使用clearTimeout取消定时器

setTimeout调用会返回一个定时器标识符，我们可以使用clearTimeout来取消定时器：

let timerId = setTimeout(...);
clearTimeout(timerId);

setInterval：周期性执行

setInterval函数的语法与setTimeout相同，但它用于设置一个定时器，该定时器会以指定的时间间隔周期性地执行一个函数。

let timerId = setInterval(function|code, [delay], [arg1], [arg2], ...);

要停止进一步的调用，我们可以使用clearInterval(timerId)。

示例：

// 每2秒重复一次
let timerId = setInterval(() => alert("tick"), 2000);

// 5秒后停止
setTimeout(() => {
  clearInterval(timerId);
  alert("stop");
}, 5000);

嵌套的setTimeout vs setInterval

虽然setInterval可以用于周期性执行，但嵌套的setTimeout提供了更多的灵活性。例如，我们可以根据每次执行的结果来调整下一次调用的时间间隔。

示例：

let delay = 5000;
let timerId = setTimeout(function request() {
  // ...发送请求...
  if (/* 服务器过载 */) {
    delay *= 2;
  }
  timerId = setTimeout(request, delay);
}, delay);

总结

setTimeout和setInterval是 JavaScript 中处理时间的强大工具。它们允许我们在代码执行中引入延迟和周期性任务。然而，使用这些函数时，我们应该注意取消不再需要的定时器，以避免内存泄漏。

希望这篇文章能帮助你更好地理解和使用 JavaScript 中的定时器功能！