JavaScript clearInterval使用详解

1. 简介

clearInterval() 是 JavaScript 中的一个函数，用于取消由 setInterval() 函数创建的定时器。定时器通过 setInterval() 函数在指定的时间间隔内重复执行指定的代码块。clearInterval() 函数可以在需要终止定时器的时候调用，以避免代码继续重复执行。

本文将详细介绍 clearInterval() 函数的用法、语法以及常见的使用场景，并提供一些示例代码。

2. `clearInterval()` 语法

clearInterval() 函数的语法如下：

clearInterval(intervalID)

其中，intervalID 是要终止的定时器的唯一标识符，由 setInterval() 函数返回。

3. 使用示例

下面我们来看几个使用 clearInterval() 函数的示例，以帮助更好地理解其用法和效果。

示例 1: 取消重复执行的定时器

// 创建一个定时器，每隔1秒输出一次当前时间
let intervalID = setInterval(() => {
  let date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 5秒后取消定时器
setTimeout(() => {
  clearInterval(intervalID);
  console.log("定时器已取消");
}, 5000);

在上面的示例中，我们使用 setInterval() 函数创建了一个定时器，它会每隔1秒输出当前的时间。然后，我们使用 setTimeout() 函数在经过5秒后调用 clearInterval() 函数，从而取消定时器的执行。

示例代码的运行结果如下：

10:42:12
10:42:13
10:42:14
10:42:15
定时器已取消

可以看到，当定时器被取消后，不再输出当前时间。

示例 2: 控制动画的开始和结束

定时器常用于实现动画效果。下面的示例演示了如何使用 clearInterval() 函数控制动画的开始和结束。

let box = document.getElementById("box");
let position = 0;
let intervalID;

function moveBox() {
  position += 10;
  box.style.left = position + "px";

  if (position >= 200) {
    clearInterval(intervalID);
    console.log("动画结束");
  }
}

// 开始动画
intervalID = setInterval(moveBox, 100);

在上面的示例中，我们定义了一个 moveBox() 函数，该函数会每隔100毫秒将盒子向右移动10像素。当盒子的位置达到200像素时，我们使用 clearInterval() 函数停止定时器的执行，并在控制台输出”动画结束”。

示例 3: 控制页面刷新

有时候我们需要定时刷新页面或执行某些操作。下面的示例展示了如何使用 clearInterval() 函数控制页面刷新。

let countDown = 10;
let countdownDisplay = document.getElementById("countdown");

function refreshPage() {
  countdownDisplay.textContent = countDown + " 秒后刷新";

  if (countDown <= 0) {
    clearInterval(intervalID);
    location.reload();
  }

  countDown--;
}

// 开始倒计时
intervalID = setInterval(refreshPage, 1000);

在上面的示例中，我们定义了一个 refreshPage() 函数，该函数会每隔1秒更新页面上的倒计时数。当倒计时数减少到 0 时，我们使用 clearInterval() 函数停止定时器的执行，并通过 location.reload() 方法刷新页面。