js定时器 setTimeout和setInterval对比

一、相同点：

setTimeout 和 setInterval 都是 JavaScript 中用于定时操作的函数

二、不同点：

1. 执行次数：

setTimeout 设定一个定时器，当达到指定的时间后，执行一次函数。
setInterval 设定一个定时器，每隔指定的时间，就会执行一次函数。如果没有明确停止，它将无限次地执行。

2. 停止方式：

setTimeout 执行完后，除非再次调用，否则不会再次执行。
setInterval 需要使用 clearInterval() 函数来停止重复执行。

3. 用例：

setTimeout适用于只需要执行一次的场景，比如在某个操作完成后延迟执行一个函数。
setInterval适用于需要重复执行的场景，比如创建一个秒表、定时刷新页面数据等。

4. 性能注意事项：

setTimeout 可以更精确地控制执行时间，因为它只执行一次。
setInterval 如果执行的函数耗时较长，可能会导致后续的执行延迟或堆积，因此需要谨慎使用。

5. 返回值：

setTimeout 返回一个定时器ID，可以用来引用这个定时器。
setInterval 同样返回一个定时器ID，但因为其可能执行多次，可能需要结合 `clearInterval` 来管理。

6. 取消方式：

   - 可以通过传递返回的定时器ID给 `clearTimeout` 函数来取消 `setTimeout`。
   - 可以通过传递返回的定时器ID给 `clearInterval` 函数来取消 `setInterval`。

示例：

//javascript
// 使用 setTimeout
const timeoutId = setTimeout(() => {
  console.log('这个信息会在指定的延迟后打印一次。');
}, 1000); // 延迟1000毫秒（1秒）执行

// 使用 clearTimeout 取消上面的 setTimeout
clearTimeout(timeoutId);

// 使用 setInterval
const intervalId = setInterval(() => {
  console.log('这个信息会每隔指定的时间打印一次，直到 clearInterval 被调用。');
}, 1000); // 每隔1000毫秒执行一次

// 使用 clearInterval 取消上面的 setInterval
clearInterval(intervalId);