如何使用 JavaScript `setTimeout`【新手全面指南】

这是一个用于在指定时间后执行处理的 JavaScript 基本函数。

⏰ 实时演示：体验 setTimeout

点击下方按钮，3 秒后会显示一条消息。

基本用法（代码片段）

setTimeout 的基本语法非常简单。只需指定要执行的函数和延迟时间（毫秒）即可。

// 3000 毫秒（即 3 秒）后显示警告框
setTimeout(() => {
  alert("3 秒已过去！");
}, 3000);

复制即用！完整 HTML 示例

将以下代码保存为 HTML 文件，即可马上运行查看效果。

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>setTimeout 示例</title>
</head>
<body>

  <h1>setTimeout 测试</h1>
  <p>页面加载后 5 秒会显示一条消息。</p>

  <script>
    setTimeout(() => {
      // 也可以操作页面中的元素
      const messageDiv = document.createElement('div');
      messageDiv.textContent = '🎉 5 秒已过去！';
      document.body.appendChild(messageDiv);
    }, 5000); // 5000 毫秒 = 5 秒
  </script>

</body>
</html>

优点与缺点

优点：
- ✅ 语法非常简单，新手也能轻松上手。
- ✅ 延迟执行处理有助于避免界面阻塞，提升用户体验。
- ✅ 可用于动画、提示显示等多种用途。
缺点：
- ❌ 只执行一次。（如果需要重复执行请使用 `setInterval`）
- ❌ 所设定的时间并不保证精确。（只是“最少”等待时间）
- ❌ 如果处理嵌套较深，代码可读性会变差（可能出现回调地狱）。

实际应用场景

setTimeout 不仅仅适用于延迟执行，还在实际开发中非常有用。

常见用途

提交表单后显示确认提示信息并在几秒后自动隐藏。
用户停止输入后稍作等待再显示搜索建议。
页面加载完成后，延迟启动动画效果。
将大型处理任务拆分，避免界面卡顿。

常见问题（Q&A）

问：如果设定为 0 毫秒会怎样？

答：不会立即执行。它会被放入任务队列中，在当前任务全部完成后尽快执行。这种用法通常用于将重处理任务拆分，提升响应性能。

问：`setTimeout` 和 `setInterval` 有什么区别？

答：`setTimeout` 只执行一次，`setInterval` 则按指定间隔重复执行。要停止 `setInterval`，请使用 `clearInterval`。

问：可以在执行前取消吗？

答：可以。将定时器的 ID 存储在变量中，如 `const timerId = setTimeout(...)`，然后调用 `clearTimeout(timerId)` 即可取消。

总结

setTimeout 是 JavaScript 中非常基础但又强大的函数，是异步编程的起点之一。无论是用户体验优化，还是性能调优，都非常实用。请先掌握其基础用法，然后灵活运用到各种场景中！