从时差到间隔：深入探索 JavaScript 中的 setTimeout 和 setInterval

2023-09-13 08:37:39

前言

在 JavaScript 开发中，计时器函数 setTimeout 和 setInterval 经常被使用来实现延迟执行和周期性任务。它们是 JavaScript 语言中的内置函数，可以让我们在指定的延迟时间后执行一段代码，或者以指定的间隔重复执行一段代码。

本文将从一个实际开发场景出发，探讨 setTimeout 和 setInterval 函数的使用方法和实现原理，并分析它们在网站开发中的应用。

开发实践：轨迹回放功能

在开发一个轨迹回放功能时，我们需要实现一个功能：点击线上任意一点后可以从点击处重新播放。通过查看原有版本，发现同时使用了 setTimeout 和 setInterval。

在这个场景中，setTimeout 用于延迟执行轨迹回放功能，在点击线上任意一点后，等待一段时间再开始播放，以确保用户有足够的时间来点击。而 setInterval 则用于周期性地执行轨迹回放功能，每隔一段时间播放一段轨迹，以实现连续播放的效果。

setTimeout 与 setInterval 的比较

setTimeout 和 setInterval 都是 JavaScript 中的计时器函数，但它们在使用上有不同的特点和区别。

setTimeout

setTimeout 函数用于延迟执行一段代码。它接受两个参数：第一个参数是需要执行的代码，第二个参数是延迟的时间，单位是毫秒。

setTimeout(function() {
  // 延迟一段时间后执行的代码
}, 1000); // 延迟 1 秒

setTimeout 函数会在指定的时间延迟后执行代码，但它不会阻塞主线程。这意味着在延迟时间内，主线程可以继续执行其他任务，而不会等待 setTimeout 函数执行完成。

setInterval

setInterval 函数用于周期性地执行一段代码。它接受两个参数：第一个参数是需要执行的代码，第二个参数是执行的间隔时间，单位是毫秒。

setInterval(function() {
  // 每隔一段时间执行的代码
}, 1000); // 每隔 1 秒执行

setInterval 函数会每隔指定的时间间隔执行代码，直到它被清除。与 setTimeout 函数一样，setInterval 函数也不会阻塞主线程，主线程可以继续执行其他任务，而不会等待 setInterval 函数执行完成。

setTimeout 和 setInterval 的实现原理

setTimeout 和 setInterval 函数的实现原理都是基于 JavaScript 的事件循环（Event Loop）。事件循环是一个循环，它不断地检查是否有新的事件需要处理，如果有，就执行相应的事件处理函数。

当调用 setTimeout 或 setInterval 函数时，浏览器会将执行代码的函数注册到事件队列中。当事件循环到达该函数时，就会执行该函数。

// setTimeout 的实现原理
setTimeout(function() {
  // 延迟一段时间后执行的代码
}, 1000);

// setInterval 的实现原理
setInterval(function() {
  // 每隔一段时间执行的代码
}, 1000);

// 事件循环
while (true) {
  // 检查是否有新的事件需要处理
  // 如果有，就执行相应的事件处理函数
}