JavaScript是一种既简单又强大的脚本语言，因为它能让网页开发者获得不断变化的效果，比如动态更新页面内容、动画、弹窗等。这些功能背后的原理都是JavaScript提供的定时器，它们可帮助开发者在指定的时间段内重复执行某个函数。但是，定时器只有在需要时才使用，否则它们会浪费大量的CPU资源，影响性能。因此，一旦不再需要使用某个定时器，就应该用clearInterval函数来停止它。在本文中，我们将学习如何使用JavaScript中的clearInterval函数来停止定时器。

JavaScript定时器基础

在讨论如何停止定时器之前，我们需要了解一下JavaScript定时器的基础知识。JavaScript经常用setInterval函数来实现定时器（也可以用setTimeout函数来实现，但它只执行一次）。setInterval函数接受两个参数：第一个是执行的函数，即希望重复执行的函数的名称或匿名函数；第二个参数是间隔时间，以毫秒为单位。例如：

setInterval(function () { console.log('Hello, world!'); }, 1000);

以上代码将每秒钟打印一次“Hello, world!”到控制台。此时，刚打开网页，代码将在指定的时间（1000毫秒或1秒）后开始执行，并每秒钟执行一次，直到页面被卸载。

停止定时器

如前所述，启动定时器后，我们也应该正确地停止它。要停止定时器，只需调用clearInterval函数，并将其传递给setInterval函数返回的ID值，例如：

var myTimer = setInterval(function () { console.log('Hello, world!'); }, 1000);

clearInterval(myTimer);

以上代码设置一个变量myTimer来存储setInterval函数的ID。然后，我们使用clearInterval函数停止定时器。这样，每秒钟打印“Hello, world！”的代码循环将停止。

多个定时器

当同一页面中存在多个定时器时，我们必须分别标识每个定时器。为此，我们可以创建一个数组来存储每个定时器的ID。使用以下示例代码：

var myTimers = [];

myTimers.push(setInterval(function () { console.log('Hello, world! Interval 1'); }, 1000));

myTimers.push(setInterval(function () { console.log('Hello, World! Interval 2'); }, 2000));

以上代码使用了一个数组myTimers来存储两个不同的定时器以及它们的ID。第一个定时器每秒钟打印一次“Hello, world! Interval 1“到控制台；第二个定时器每两秒钟打印一次“Hello, world！Interval 2”到控制台。要停止这两个定时器，我们可以在循环中标识每个定时器，例如：

for (var i = 0; i < myTimers.length; i++) {

clearInterval(myTimers[i]);

}

以上代码使用for循环遍历myTimers数组，并停止每个存储在数组中的定时器。

动态停止

在某些情况下，我们不知道定时器何时将被启动，因此我们不能在它们最初被定义时通过变量来引用它们。在这种情况下，我们需要设置全局变量，并在定时器函数内部将ID推入一个数组，例如：

var myTimers = [];

function startTimer() {

myTimers.push(setInterval(function () { console.log('Hello, world!'); }, 1000));

}

function stopTimer() {

clearInterval(myTimers.pop());

}

在以上代码中，当startTimer函数被调用时，它向全局myTimers数组推入一个新的更改。它执行间隔为1秒的定时器循环，并打印“Hello, World!”的消息。当stopTimer函数被调用时，它被弹出myTimers数组中的ID，并将其传递给clearInterval函数以停止定时器。

错误的引用

如果尝试停止未定义或已清除的定时器，则会发生错误。如果使用引用传递为已清除的定时器，则调用clearInterval不会发生任何操作，例如：

var myTimer = setInterval(function () { console.log('Hello, World!'); }, 1000);

clearInterval(myTimer);

// error

clearInterval(myTimer);

在以上代码中，第一个调用清除了定时器，但第二个调用尝试清除已经不存在的计时器，这会导致错误。当调用对已清除的计时器或未定义的计时器的引用时，请始终确保它可用。

结论

在JavaScript中，使用定时器可以在指定的时间间隔内执行函数。要在不再需要定时器时停止它，请使用clearInterval函数。在单一定时器的情况下，将ID值传递给clearInterval即可。如果有多个定时器，请创建一个数组来存储它们的ID，并在循环中停止它们。如果不知道在何时启动定时器，您可以使用全局变量来存储ID，并将它们插入数组中。