JavaScript中停止执行setInterval和setTimeout事件的方法

停止执行 setInterval 和 setTimeout 事件通常使用 clearInterval() 和 clearTimeout() 方法。下面是该方法的详细讲解。

clearInterval()

clearInterval() 方法用于停止通过 setInterval() 方法设定的周期性定时器。

语法

clearInterval(intervalID)

参数

• intervalID：周期性定时器的 ID 值。由 setInterval() 返回的 ID 值。

示例1

下面的示例创建了一个循环定时器，每隔1秒钟输出一次当前时间，共输出5次。最后使用 clearInterval() 方法停止定时器。

let count = 0;
let interval = setInterval(() => {
  console.log(new Date());
  count++;
  if (count >= 5) {
    clearInterval(interval);
  }
}, 1000);

示例2

下面的示例创建了一个循环定时器，每隔1秒钟输出一次当前时间，共输出5次。使用 setTimeout() 方法在5秒后停止定时器。

let count = 0;
let interval = setInterval(() => {
  console.log(new Date());
  count++;
  if (count >= 5) {
    clearTimeout(timeout);
  }
}, 1000);

let timeout = setTimeout(() => {
  clearInterval(interval);
}, 5000);

clearTimeout()

clearTimeout() 方法用于停止通过 setTimeout() 方法设定的单次定时器。

语法

clearTimeout(timeoutID)

参数

• timeoutID：单次定时器的 ID 值。由 setTimeout() 返回的 ID 值。

示例

下面的示例创建了一个单次定时器，5秒后输出一句话，并停止定时器。

let timeout = setTimeout(() => {
  console.log('5秒已到！');
}, 5000);

clearTimeout(timeout);