JavaScript实例解析清除定时器-猿码集

1. 前言

在JavaScript中，如果想要进行一些定时的操作，就需要使用到定时器。但是在某些情况下，需要清除定时器，比如当页面加载完成后不想再执行定时器中的代码，或者需要在某个条件满足时停止定时器。本文主要介绍如何清除JavaScript中的定时器。

2. 定时器的概念

2.1 setInterval

setInterval是一个周期性定时器，可以按照指定的时间间隔循环执行一段代码。


var intervalID = setInterval(function(){
  console.log("Hello World");
}, 1000);

上面的代码会每隔一秒钟输出一次“Hello World”。setInterval会返回一个定时器ID，可以通过该ID清除定时器。

2.2 setTimeout

setTimeout也是一个定时器，但是它只会执行一次。


var timeoutID = setTimeout(function(){
  console.log("Hello World");
}, 1000);

上面的代码会在一秒钟后输出一次“Hello World”。setTimeout同样会返回一个定时器ID，可以通过该ID清除定时器。

3. 清除定时器

在使用定时器时，有时需要手动清除定时器，以避免无限循环或者不必要的计算。可以使用clearInterval和clearTimeout来清除定时器。

3.1 clearTimeout

使用clearTimeout可以清除一个由setTimeout创建的定时器。


var timeoutID = setTimeout(function(){
  console.log("Hello World");
}, 1000);
clearTimeout(timeoutID);

上面的代码中，定时器会在一秒钟后执行一次并输出“Hello World”，但是在定时器执行之前，clearTimeout会清除该定时器，使得“Hello World”不会输出。

3.2 clearInterval

使用clearInterval可以清除一个由setInterval创建的定时器。


var intervalID = setInterval(function(){
  console.log("Hello World");
}, 1000);
clearInterval(intervalID);

上面的代码中，定时器会每隔一秒钟输出一次“Hello World”，但是在执行几次后，clearInterval会清除该定时器，使得输出停止。

4. 定时器的注意事项

4.1 定时器ID

在使用定时器时，务必要保存定时器ID，否则无法清除定时器。


var intervalID = setInterval(function(){
  console.log("Hello World");
}, 1000);
// 错误的清除方式
clearInterval(setInterval(function(){}, 1000));

上面的代码中，错误地使用了一个匿名函数来创建定时器，导致无法清除该定时器。

4.2 定时器嵌套

在使用定时器时，需要注意定时器嵌套的问题。


var timeoutID = setTimeout(function(){
  console.log("Hello World");
  var intervalID = setInterval(function(){
    console.log("Hello Again");
  }, 1000);
}, 1000);
setTimeout(function(){
  clearInterval(intervalID);
}, 5000);
clearTimeout(timeoutID);

上面的代码中，当超过5秒钟后，定时器会停止输出“Hello Again”，但是会继续输出“Hello World”。这是因为定时器嵌套导致外层的定时器被清除，但是内层的定时器仍在运行。

5. 总结

本文主要介绍了JavaScript中定时器的清除方法，包括使用clearInterval和clearTimeout来清除定时器。在使用定时器时，需要注意保存定时器ID和避免定时器嵌套的问题。

JavaScript实例解析清除定时器