js 定时器clearInterval的使用|极客笔记

js 定时器clearInterval的使用

1. 前言

在编写 JavaScript 程序时，我们经常需要使用定时器来实现一些定时执行的功能。JavaScript 提供了 setInterval 和 setTimeout 这两个函数，分别用于设置重复定时器和延时定时器。当我们需要结束一个定时器时，可以使用 clearInterval 和 clearTimeout 来清除定时器。

本文将重点介绍 clearInterval 函数的使用。我们会了解清除定时器的原理、使用场景和具体操作，并提供一些示例代码和运行结果。

2. 清除定时器的原理

在 JavaScript 中，通过 setInterval 函数创建的定时器会以一定的时间间隔重复执行指定的代码，直到我们手动停止它。定时器会返回一个唯一的编号，我们可以使用这个编号来标识和清除该定时器。

clearInterval 函数的作用就是根据定时器的编号，清除对应的定时器。它会将关联的定时器从任务队列中移除，从而停止其后续的执行。

3. clearInterval 的基本用法

clearInterval 函数的调用格式如下：

clearInterval(intervalId)

其中，intervalId 是由 setInterval 创建的定时器的编号。

注意： clearInterval 函数只能清除由 setInterval 创建的定时器，无法清除由 setTimeout 创建的延时定时器。如果要清除 setTimeout 创建的定时器，需要使用 clearTimeout 函数。

4. 使用场景

在实际开发中，清除定时器的场景有很多。下面是一些常见的使用场景：

4.1. 定时更新数据

在网页中，有时需要根据一定的时间间隔从服务器获取最新数据并更新页面。使用定时器可以周期性地发送请求和更新数据。如果数据已经更新完毕，或者页面不需要再更新，就可以通过 clearInterval 来清除定时器，停止后续的数据更新。

4.2. 动画效果控制

在实现动画效果时，经常需要使用定时器来更新元素的位置、透明度、大小等属性。如果动画已经完成，或者需要提前结束动画，就可以使用 clearInterval 来停止定时器。

4.3. 倒计时功能

在比赛、抢购等场景中，通常需要显示一个倒计时。倒计时功能可以通过设置一个定时器，每秒更新剩余时间并显示在页面上。当倒计时结束或用户手动停止时，可以使用 clearInterval 停止定时器。

5. 示例代码

下面通过几个示例代码，演示了 clearInterval 函数的使用。

5.1. 接收用户输入，定时显示消息

let intervalId;

function showMessage(message) {
  console.log(message);
}

function startTimer() {
  intervalId = setInterval(function() {
    let message = prompt("请输入要显示的消息：");
    showMessage(message);
  }, 1000);
}

function stopTimer() {
  clearInterval(intervalId);
}

// 调用 startTimer() 来启动定时器
startTimer();

// 运行结果：
// 每隔1秒弹出一个输入框
// 输入框中输入的内容将会被打印出来

在上面的示例中，我们通过 setInterval 创建了一个每隔1秒执行一次的定时器。定时器的回调函数会弹出一个输入框，用户可以输入要显示的消息。该消息会通过 showMessage 函数打印出来。

通过 clearInterval(intervalId) 可以停止这个定时器，不再继续弹出输入框。

5.2. 动态更新网页元素的样式

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 1s;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    let intervalId;
    let left = 0;

    function moveBox() {
      let boxElement = document.getElementById("box");
      boxElement.style.left = left + "px";
      left += 10;
    }

    function startAnimation() {
      intervalId = setInterval(moveBox, 1000);
    }

    function stopAnimation() {
      clearInterval(intervalId);
    }

    // 调用 startAnimation() 来启动动画
    startAnimation();
  </script>
</body>
</html>

在上面的示例中，我们通过 setInterval 创建了一个每隔1秒执行一次的定时器。定时器的回调函数 moveBox 会将 box 元素的 left 样式值逐渐增加。由于 box 元素的样式设置了过渡效果 transition: all 1s，因此位置的改变会呈现一个平滑的动画效果。

通过调用 clearInterval(intervalId) 可以停止这个定时器，动画不再进行。