JavaScript clearInterval() 函数

JavaScript clearInterval() 语法

clearInterval() 是 JavaScript 的一个全局函数（也叫 “全局方法” ），它用于清除 setInterval() 实现的定时器。

在浏览器环境中，clearInterval() 是 window 对象的方法。而在 Node.js 环境中，它是 global 对象的方法。

语法：

clearInterval(timerID)

说明：

clearInterval() 方法接收单个参数。

timerID（必选）：它是 setInterval() 的返回值。

setInterval() 会返回一个值（浏览器返回一个正整数、Node.js 返回一个对象），该值用于标识定时器的 ID。我们可以将此 ID 与 clearInterval() 一起使用，从而达到取消定时器的目的。

注意: setTimeout() 和 setInterval() 使用的 ID 池是共享的。为了避免出现问题，在清除 setTimeout() 时，我们应该使用的是 clearTimeout()，而不要使用 clearInterval()。同理地，在清除 setInterval() 时，我们应该使用的是 clearInterval()，而不要使用 clearTimeout()

JavaScript clearInterval() 摘要

属于	JavaScript window 对象
使用频率	高
官方文档	查看
MDN	查看

JavaScript clearInterval() 示例

接下来，我们通过一个简单的例子来讲解一下 JavaScript clearInterval() 方法是如何使用的。

示例：clearInterval() 基本用法

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="btn" type="button">暂停</button>

    <script>
        const oBtn = document.getElementById("btn");
        let n = 5;

        // 页面加载后立即启动定时器
        const timer = setInterval(() => {
            if (n > 0) {
                console.log(n);
                n--;
            } else {
                // 可选：倒计时结束后自动清除定时器，避免空转
                // clearInterval(timer); 
            }
        }, 1000);

        // 使用 addEventListener 监听点击事件
        oBtn.addEventListener("click", function() {
            clearInterval(timer); // 清除定时器
            console.log("定时器已暂停");
        });
    </script>
</body>
</html>

运行之后，控制台输出如下。

分析：

上面例子实现了一个倒计时效果：5、4、3、2、1。如果在倒计的过程中单击了【暂停】按钮，则会停止倒计时。【暂停】按钮这里就是使用了 clearInterval() 清除 setInterval() 实现的定时器。

clearTimeout() 与 clearInterval() 的区别

clearTimeout() 和 clearInterval() 都是用于清除一个定时器，它们之间的区别在于：

对于 setTimeout() 实现的定时器，应该使用 clearTimeout() 来取消。
对于 setInterval() 实现的定时器，应该使用 clearInterval() 来取消。