在JavaScript中，定时器是非常常见的一种技术，在实现倒计时、实时刷新数据等方面都得到了广泛应用，其中最常见的定时器是setInterval和setTimeout。在定时器的使用过程中，我们一旦开启了计时器，它就会一直运行，如果不手动停止，会一直占用计算机的资源，最终会造成网页的运行速度变慢，甚至导致崩溃。因此在使用定时器时，停止计时器的方法尤为重要。

在JavaScript中，用来停止定时器的函数是clearInterval函数。clearInterval函数能够完全停止定时器的运作，使得它不再占用计算机的资源，从而能够提高页面的运行速度。下面我们来详细介绍如何正确使用clearInterval函数来停止JavaScript定时器。

一、setInterval和clearInterval的基本使用方法

setInterval和clearInterval是一对互相依存的函数，都是在window对象上的方法，分别用于开启定时器和停止定时器。setInterval函数的作用是每隔一定的时间（以毫秒为单位）执行指定的代码块，可以无限次执行，直到调用clearInterval函数停止。语法格式如下：

```

var timer = setInterval(函数, 时间);

```

函数表示要执行的代码块，时间表示每隔多少毫秒执行一次，返回值为该计时器的唯一标识。在运行时，可以通过该标识来停止定时器。

例如，下面的代码使用setInterval函数每隔1000ms打印一次“hello world”：

```

var timer = setInterval(function() {

console.log("hello world");

}, 1000);

```

此时，变量timer存储了该计时器的标识。

如果想要停止计时器的运行，就需要调用clearInterval函数，语法格式如下：

```

clearInterval(timer);

```

其中，参数timer指定要停止的计时器的标识。例如：

```

clearInterval(timer);

```

这样就可以停止之前开启的计时器了。

二、注意事项

1. 注意清除多余的计时器

在使用多个计时器的情况下，一定要及时清除多余的计时器，否则会造成计算机资源的浪费。例如，下面的代码在打开新的tab窗口后，会同时开启两个计时器，但只有一个计时器被正确地清除了：

```

var timer1 = setInterval(function() {

console.log("hello world1");

}, 1000);

var timer2 = setInterval(function() {

console.log("hello world2");

}, 1000);

window.open("http://www.baidu.com");

clearInterval(timer1);

```

注意这里只调用了clearInterval(timer1)，未调用clearInterval(timer2)，因此定时器2仍在继续运行，会占用计算机的资源。

为了解决这个问题，可以使用一个数组来保存所有计时器的标识，并在需要停止计时器的时候遍历数组，清除所有计时器：

```

var timers = [];

var timer1 = setInterval(function() {

console.log("hello world1");

}, 1000);

var timer2 = setInterval(function() {

console.log("hello world2");

}, 1000);

timers.push(timer1);

timers.push(timer2);

window.open("http://www.baidu.com");

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

clearInterval(timers[i]);

}

```

这样就可以保证所有的计时器都能够正确地被清除掉。

2. 注意清除使用setTimeout开启的计时器

在使用setTimeout技术时也需要注意清除计时器。清除setTimeout开启的计时器需要使用clearTimeout函数，语法格式和clearInterval函数相同。

例如，下面的代码使用了setTimeout函数开启了一个定时器，并在3s后执行一次代码块：

```

var timer = setTimeout(function() {

console.log("hello world");

}, 3000);

```

如果想要清除该计时器，只需要调用clearTimeout函数即可：

```

clearTimeout(timer);

```

同样的，也需要注意清除多余的计时器。

3、注意定时器周期的浮点误差

在使用setInterval函数执行周期性的任务时，需要注意周期的浮点误差。例如，下面的代码使用setInterval函数每100ms打印一次 “hello world”：

```

var timer = setInterval(function() {

console.log("hello world");

}, 100);

```

然而，由于计算机精度的问题，实际上周期可能会比100ms略微长一些。这可能导致计时器运行过程中的一些问题，例如执行次数不准确。因此，可以采用setTimeout函数来精确地控制周期。例如，下面的代码使用setTimeout函数实现每100ms打印一次"hello world"：

```

function doSomething() {

console.log("hello world");

setTimeout(doSomething, 100);

}

setTimeout(doSomething, 100);

```

该方法使用了嵌套的setTimeout函数，可以实现周期性的任务，同时也可以避免周期浮点误差导致的问题。

三、总结

setInterval和clearInterval是一对非常常见的函数，在JavaScript的时间处理中发挥着重要作用。学会正确使用clearInterval函数可以避免计时器占用计算机资源带来的问题，同时也可以提高网站的运行速度。在适当的时候清除计时器对于保证网站的稳定性和性能非常重要，希望大家可以掌握定时器的正确使用方法。