学习 JavaScript的工作原理setTimeout()。setInterval()本指南面向初学者，通过简单示例和最佳实践讲解了如何使用计时函数进行异步操作。
介绍
在 JavaScript 中，并非所有任务都需要立即运行。有时，您可能需要延迟某个函数、安排重复的任务，或者控制代码的执行时间。这时，异步定时函数（例如setTimeout()和setInterval()）就派上用场了。
这两个内置函数可帮助您管理代码中的时间和延迟，从而可以在正确的时刻执行操作而不会阻塞程序的其他部分。
本指南涵盖了您需要了解的有关setTimeout()和的所有信息setInterval()，包括它们的工作原理、何时使用它们以及需要注意的常见错误。
您将学到什么
在本教程结束时，您将了解：
JavaScript 中的内容setTimeout()和功能setInterval()
异步计时功能的工作原理
如何安排延迟和重复的动作
如何使用clearTimeout()和停止计时器clearInterval()
有效使用计时功能的最佳实践
理解 JavaScript 中的异步计时
在探索setTimeout()和之前setInterval()，您需要了解异步行为在 JavaScript 中的工作方式。
通常，JavaScript 会按顺序运行每行代码，这称为同步执行。但是，某些操作（例如等待计时器或获取数据）不需要停止所有其他操作。
异步计时函数就派上用场了。它们允许延迟或重复某些操作，而不会冻结主线程，从而保持应用的响应速度和流畅性。
setTimeout() 是什么？
setTimeout()是一个 JavaScript 函数，在指定的延迟后执行代码。计时器结束后，它会运行一次给定的函数。
句法：
setTimeout(function, delay);
函数：您想要执行的代码。
延迟：代码运行之前的时间（以毫秒为单位）。
例子：
setTimeout(() => { console.log("This message appears after 3 seconds!");}, 3000);工作原理：
这段代码等待3 秒（3000 毫秒）后才显示消息。与此同时，程序的其余部分仍在正常运行，这就是异步行为！
setInterval() 是什么？
与运行一次不同的是setTimeout()，它会按照设定的时间间隔重复setInterval()执行某个函数，直到您告诉它停止。
句法：
setInterval(function, delay);
例子：
setInterval(() => { console.log("This message repeats every 2 seconds!");}, 2000);工作原理：
此代码每 2 秒持续运行一次，直到您手动停止它，非常适合更新时钟时间或刷新实时数据等任务。
停止计时器
两个计时功能都可以使用各自的清除方法停止：
clearTimeout(timerID)停止延迟动作。
clearInterval(intervalID)停止重复动作。
例子：
const timer = setInterval(() => { console.log("Running...");}, 1000);setTimeout(() => { clearInterval(timer); console.log("Stopped after 5 seconds!");}, 5000);这里，setInterval()每秒运行一次，但setTimeout()5 秒后停止。它们共同创造了可控且高效的计时行为。
使用 setTimeout() 和 setInterval() 的最佳实践
在结束之前，让我们看一下使用计时功能时要遵循的一些最佳实践：
始终清除间隔：用于clearInterval()在不再需要重复任务时停止重复任务。
避免过多的间隔：一次运行太多会降低应用程序的速度。
使用箭头函数：为了更清晰、更现代的语法。
明智地使用异步逻辑：在处理 API 调用或动态数据时，将计时函数与承诺或异步/等待相结合。
测试您的延迟：不同的浏览器处理微小的时间差异可能会略有不同。
这些习惯有助于您的代码保持高效且易于维护。
结论
setTimeout()和setInterval()是两个简单但功能强大的工具，用于控制 JavaScript 代码的执行时间。它们可以轻松延迟操作或自动重复操作，而不会阻塞主线程。
通过掌握这些函数，您将能够创建更流畅、更具交互性和响应速度的应用程序。无论您是为元素添加动画、获取更新还是安排任务，异步计时函数都是编写现代动态 JavaScript 的关键。