JavaScript的定时器

最新推荐文章于 2026-06-05 12:39:47 发布

原创最新推荐文章于 2026-06-05 12:39:47 发布 · 1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

JavaScript零基础入门

文章目录

JavaScript的定时器

JavaScript的定时器

1. setInterval（间隔定时器）

间隔定时器：按照指定周期（毫秒）去执行指定的代码
语法：setInterval(函数, 时间)
示例：

setInterval(function () {
	console.log('执行一次')
}, 1000)

在这里插入图片描述

2. setTimeout（延时定时器）

延时定时器：在固定的时间（毫秒）后执行一次指定的代码
语法：setTimeout(函数, 时间)
示例：

setTimeout(function () {
	console.log('执行一次')
}, 1000)

在这里插入图片描述

3. 定时器的返回值

定时器 ID 是全局递增的唯一标识，与定时器类型（setInterval 或 setTimeout）无关。
输出的具体数值取决于当前页面已创建的定时器数量（包括所有脚本创建的）。
这个 ID 的主要作用是用于清除定时器，例如 clearInterval(timer1) 会根据 ID 找到并停止对应的定时器。

// 书写第一个定时器
var timer1 = setInterval(function () {})
// 书写第二个定时器
var timer2 = setTimeout(function () {})
// 输出返回值
console.log(timer1)
console.log(timer2)

在这里插入图片描述

4. 关闭定时器

语法一：clearInterval(要关闭的定时器返回值)
语法二：clearTimeout(要关闭的定时器返回值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="close">关闭定时器</button>

    <!-- 脚本放在 body 末尾，确保所有元素已加载 -->
    <script>
        var timer1 = setInterval(function () {console.log('间隔定时器')}, 1000)
        var timer2 = setTimeout(function () {console.log('延时定时器')}, 1000)

        // 此时能确保获取到按钮元素
        document.getElementById('close').onclick = function () {
            console.log("触发")
            // 依次测试两种方式
            // clearTimeout(timer1)
            // clearTimeout(timer2)
            clearInterval(timer1)
            clearInterval(timer2)
        }
    </script>
</body>
</html>