定时器setTimeout和setInterval

在前端开发中，定时器是一项重要的功能，它允许我们在指定的时间后执行代码。常见的定时器有两种：setTimeout和setInterval。

一、setTimeout

setTimeout是一个延时执行定时器，它会在指定的延时时间后执行一次指定的函数或代码块。其语法如下：

js 复制代码

setTimeout(function, delay, param1, param2, ...);

function：要执行的函数或代码块。
delay：延迟的毫秒数。
param1, param2, ...：可选参数，传递给函数的参数。

示例：

js 复制代码

let time = setTimeout(() => {
  console.log("Hello, world!");
}, 2000);

上述代码将在2秒后打印"Hello, world!"。

需要注意的是，setTimeout的延迟时间并不是绝对精确的，它通常会比设定的时间长一些，具体取决于当时JavaScript的执行情况。另外，如果设置了多个setTimeout，且不及时清除（使用clearTimeout），它们可能会互相干扰，使延迟时间更加难以预测。

二、setInterval

setInterval是一个重复执行定时器，它会在指定的时间间隔内重复执行指定的函数或代码块。其语法如下：

js 复制代码

let intervalId = setInterval(function, delay, param1, param2, ...);

function：要执行的函数或代码块。
delay：时间间隔的毫秒数。
param1, param2, ...：可选参数，传递给函数的参数。
intervalId：返回的定时器ID，用于清除定时器。

示例：

js 复制代码

let intervalId = setInterval(() => { console.log('hello, world'); }, 2000);

上述代码将每隔2秒打印一次"hello, world"。

需要注意的是，setInterval并不关心上一次函数执行的结果，而是每隔指定的时间间隔就将函数放入主线程队列。如果上一次函数执行时间过长，下一次函数的执行时间可能会受到影响，导致实际的时间间隔比设定的长。

三、定时器的取消

clearTimeout(timeoutId)：用于取消由setTimeout设置的定时器。
clearInterval(intervalId)：用于取消由setInterval设置的定时器。

示例：

js 复制代码

// 取消setTimeout定时器
let time = setTimeout(() => {
  console.log("This will not be printed");
}, 5000);
clearTimeout(time);
 
// 取消setInterval定时器
let intervalId = setInterval(() => {
  console.log('This will print repeatedly');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
  console.log('Timer stopped');
}, 5000);

五、注意事项

1. 延迟参数的设置范围

一、最大延迟值

（1）理论最大值：

在JavaScript中，延时时间是一个32位有符号整数。因此，其最大值是2^31-1，即2147483647毫秒（大约24.8天）。

一旦设置的延迟值超过了这个最大值，它将被截断为2147483647毫秒。

（2）实际限制：

尽管理论上的最大值是2147483647毫秒，但一些浏览器可能会对延时值有不同的限制。

因此，在编写代码时，最好不要依赖于超过24.8天的延时时间。

二、最小延迟值

（1）浏览器限制：

浏览器通常会限制setTimeout的最小延时为4毫秒，即使你设置了小于4毫秒的延迟时间，它也会至少等待4毫秒后再执行代码。这意味着即使你设置为 0ms，实际的执行时间也可能在 4ms 或更高。

这一限制是为了确保执行栈的清空和避免竞态条件。

（2） 特殊情况：

在某些情况下，如使用requestAnimationFrame进行动画时，由于它与屏幕刷新同步，因此可能会受到显示器刷新率的影响，导致实际延迟时间略有不同。

三、时间参数为负数

在JavaScript中，setTimeout和setInterval函数的延迟参数通常不应设置为负数。然而，尽管设置为负数在技术上可能不会产生语法错误，但其行为并不是由标准明确规定的，且可能因浏览器而异。

当你给setTimeout和setInterval的第二个参数传递一个负数时，如-1毫秒，大多数现代浏览器会将其视为0毫秒，意味着定时器会"立即"执行

js 复制代码

let time = setTimeout(() => {
  console.log("Hello, world!");
}, -1);


let time1 = setInterval(() => {
  console.log("Hello, world!");
}, -1);

2. 返回值

setTimeout返回一个整数类型的定时器ID（timeoutId），用于后续取消定时器。这个ID是一个由浏览器分配的唯一标识符。

setInterval同样返回一个整数类型的定时器ID（intervalId），用于取消定时器。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" http-equiv="">
  <title>Disabled Input Placeholder</title>
  <style>

  </style>
</head>

<body>

  <script>
    let time = setTimeout(() => {
      console.log("Hello, world!");
    }, 1000);
    console.log(time);
    console.log(typeof time);
  </script>

</body>

</html>

3. 清除定时器

js 复制代码

let time = setTimeout(() => {
  console.log("Hello, world!");
  clearInterval(time)
}, 1000);

使用了clearInterval来尝试清除一个由setTimeout设置的定时器，尽管JavaScript引擎不会因为这个错误而抛出异常，，但setTimeout设置的定时器将会被清除，并且它将在1秒后正常执行其回调函数。

js 复制代码

let time = setInterval(() => {
  console.log("Hello, world!");
  clearTimeout(time)
}, 1000);

使用了clearTimeout来尝试清除一个由setInterval设置的定时器，尽管JavaScript引擎不会因为这个错误而抛出异常，但它将在1秒后正常执行其回调函数，并且setInterval设置的定时器将会被清除，没有循环执行这个定时器。

详细参考：developer.mozilla.org/zh-CN/docs/...