javascript定时器取消定时器及优化方法

JavaScript定时器

在JavaScript中，我们可以通过setTimeout和setInterval两个方法来实现定时器功能。它们的用法都很类似，但是它们的工作方式有一些不同。

setTimeout

setTimeout方法会在指定的时间后执行一次函数。它的基本语法如下：

setTimeout(function, delay);

其中，function参数是需要执行的函数，delay参数是指定的时间，单位是毫秒。

下面是一个简单的示例，它会在1秒后弹出一个提示框：

setTimeout(function() {
  alert("Hello, world!");
}, 1000);

在上面的例子中，我们使用了一个匿名函数作为第一个参数，这个函数在1秒后会被执行。

setInterval

setInterval方法和setTimeout类似，但是它会在一定的时间间隔后重复执行函数。它的基本语法如下：

setInterval(function, delay);

和setTimeout方法一样，function参数是需要执行的函数，delay参数是指定的时间间隔，单位是毫秒。

下面是一个简单的示例，它会每隔1秒输出一个数字：

var count = 0;
var intervalId = setInterval(function() {
  console.log(count);
  count++;
}, 1000);

在上面的例子中，我们定义了一个变量count，并通过setInterval方法来每隔1秒输出一个数字。我们还把setInterval方法的返回值存储到了一个变量intervalId中，以便以后取消定时器。

取消定时器

在JavaScript中，我们可以通过clearTimeout和clearInterval两个方法来取消setTimeout和setInterval定时器。

clearTimeout

clearTimeout方法可以用于取消通过setTimeout方法创建的定时器。它的基本语法如下：

clearTimeout(timeoutId);

其中，timeoutId参数是通过setTimeout方法创建的定时器的返回值。

下面是一个示例，它会在3秒后弹出一个提示框，并在4秒的时候取消这个定时器：

var timeoutId = setTimeout(function() {
  alert("Hello, world!");
}, 3000);

setTimeout(function() {
  clearTimeout(timeoutId);
}, 4000);

在上面的例子中，我们通过setTimeout方法创建了一个定时器，并将它的返回值存储在timeoutId变量中。我们还通过另一个setTimeout方法在4秒的时候调用clearTimeout方法来取消定时器。

clearInterval

clearInterval方法可以用于取消通过setInterval方法创建的定时器。它的基本语法如下：

clearInterval(intervalId);

其中，intervalId参数是通过setInterval方法创建的定时器的返回值。

下面是一个示例，它会每隔1秒输出一个数字，直到4秒的时候停止：

var count = 0;
var intervalId = setInterval(function() {
  console.log(count);
  count++;
  if (count == 4) {
    clearInterval(intervalId);
  }
}, 1000);

在上面的例子中，我们通过setInterval方法创建了一个定时器，并将它的返回值存储在intervalId变量中。我们还在定时器回调函数中添加了一个判断，如果输出的数字到达了4，就调用clearInterval方法来取消定时器。

定时器的优化方法

当我们使用定时器的时候，有几个常见的问题需要注意：

1. 内存泄漏：当我们创建了一个定时器，但是在一定时间内没有取消它，它会一直占用内存，从而导致内存泄漏。
2. 定时器叠加：当我们多次调用定时器函数创建定时器时，可能会存在多个定时器同时运行的情况，这样会浪费系统资源和网络资源，从而影响性能。

内存泄漏问题

为了避免内存泄漏问题，我们应该在不再需要定时器的时候尽快取消它。通常，我们可以将定时器的返回值存储在一个全局变量中，并在需要取消定时器的时候调用clearTimeout或clearInterval方法来取消它。

下面是一个示例，它会在3秒后弹出一个提示框，并且在关闭提示框后立即取消定时器：

var timeoutId = setTimeout(function() {
  alert("Hello, world!");
}, 3000);

window.onclose = function() {
  clearTimeout(timeoutId);
};

在上面的例子中，我们定义了一个变量timeoutId来存储定时器返回的值，并且在window.onclose事件中调用clearTimeout方法来取消定时器。

定时器叠加问题

为了避免定时器叠加问题，我们可以使用一个技巧来确保每次只有一个定时器在运行。我们可以在定时器回调函数中再次调用setTimeout或setInterval方法来创建另一个定时器。这样，在一个定时器执行完毕之前，另一个定时器就会被取消，从而避免了定时器叠加的问题。

下面是一个示例，它会每隔10秒向服务器发送一个请求，但是如果服务器返回的数据还没有处理完毕，就会取消当前的定时器并等待下一个10秒的时间间隔再次发送请求：

var xhr = null;
var timeoutId = null;

function sendData() {
  xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/data", true);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {
        // 处理服务器返回的数据
      }
      scheduleNextSend();
    }
  };
  xhr.send();
}

function scheduleNextSend() {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    sendData();
  }, 10000);
}

scheduleNextSend();

在上面的例子中，我们定义了一个sendData函数，它会向服务器发送一个请求，并在处理完数据后调用scheduleNextSend函数来准备下一次请求。scheduleNextSend函数会先调用clearTimeout方法来取消当前的定时器，然后再调用setTimeout方法来创建下一个定时器。这个定时器会在10秒的时间间隔之后再次调用sendData函数。这样，我们就保证了每次只有一个定时器在运行，从而避免了定时器叠加的问题。

总结

JavaScript定时器是一项非常有用的功能，可以帮助我们在特定的时间执行代码。但是，在使用定时器的时候需要注意内存泄漏和定时器叠加问题。我们可以通过调用clearTimeout和clearInterval方法来取消定时器，并在定时器回调函数中再次调用setTimeout和setInterval方法来避免定时器叠加的问题。