本文共 1557 字，大约阅读时间需要 5 分钟。

JS中的定时器详解

在 JavaScript 开发中，定时器是非常基础却又常用的功能。两种常用的定时器函数分别是 window.setTimeout 和 window.setInterval。以下是它们的主要区别以及如何正确使用和清除定时器。

一、定时器的基本功能

var timer1 = window.setTimeout(function() { alert('定时器1执行') }, 1000);

var timer2 = window.setInterval(function() { alert('定时器2执行') }, 1000);

二、定时器的序号返回值

当使用 setTimeout 或 setInterval 函数调用时，函数返回一个定时器的标识符。这个标识符是一个数字，表示当前是第几个定时器（从1开始计数）。例如：

• var timer1 = window.setTimeout(function() {}, 1000); // 返回值1

• var timer2 = window.setTimeout(function() {}, 1000); // 返回值2

• var timer3 = window.setTimeout(function() {}, 1000); // 返回值3

需要注意的是，即使清除了某个定时器，其返回值仍然存在，但其对应的循环过程已停止。清除定时器时既可以使用与设置时相同的标识符，也可以直接使用返回值。在实际开发中，我们更推荐使用返回值来清除定时器，因为这种方法更加灵活且减少了错误可能性。

三、清除定时器的方法

• 如果使用 setTimeout 设置的定时器，应使用 window.clearTimeout(timer) 清除。

• 如果使用 setInterval 设置的定时器，应使用 window.clearInterval(timer) 清除。

• 两种清除方式支持多种参数形式：

  • 可以传递定时器标识符（如 timer1 或数字标识符如 3）。
  • 或者直接传递返回值（如 clearTimeout(1) 或 clearInterval(timer3)）来清除相应的定时器。

  例如：

  window.clearInterval(timer2); // 停止正在执行的 `timer2` 定时器

需要注意的是，即使清除了某个定时器，其返回值仍然有效，但新设定的定时器仍会从1开始编号。这一点与银行的排队领号原则相符，即使旧业务完成，后续服务仍从下一个号码继续办理。

总结

在实际开发中，合理地使用 setTimeout 和 setInterval 函数是非常重要的。选择 setTimeout 用于一克时间执行的任务，而 setInterval 用于需要持续循环执行的任务。记得定期检查并清除不需要的定时器，以避免内存泄漏和性能问题。