Javascript前端教学:setInterval与 setTimeout 的区别和联系

gCode Teacher 格码致知

46人浏览 · 2026-06-22 16:03:45

gCode Teacher 格码致知 · 2026-06-22 16:03:45 发布

明白了，去掉所有花哨的样式，回归最原始的“黑白灰”朴素风格。这是一个纯功能性的演示页面，你可以直接复制运行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定时器最简演示</title>
    <style>
        /* 只有最基础的内边距和边框，没有任何装饰 */
        body {
            font-family: sans-serif;
            padding: 20px;
        }
        hr {
            margin: 30px 0;
            border: 1px solid #ddd;
        }
        .area {
            border: 1px solid #333;
            padding: 15px;
            margin: 10px 0;
            min-height: 60px;
            background: #f9f9f9;
        }
        button {
            padding: 6px 18px;
            margin-right: 8px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>1. setTimeout（延迟执行一次）</h2>
    <p>点击按钮，等待 2 秒后文字变化，且只变化一次。</p>
    <div class="area" id="timeoutDisplay">等待点击...</div>
    <button onclick="runTimeout()">点击延迟 2 秒</button>

    <hr>

    <h2>2. setInterval（周期重复执行）</h2>
    <p>点击“开始”后每秒自动加 1，点击“停止”结束。</p>
    <div class="area" id="intervalDisplay">0 次</div>
    <button onclick="startInterval()">开始计数</button>
    <button onclick="stopInterval()">停止</button>

    <hr>
    <p style="color:#666; font-size:13px;">（切换浏览器标签页再回来，可观察 setInterval 的堆积现象）</p>

    <script>
        // ======================================
        //  案例 1：setTimeout
        // ======================================
        let timeoutTimer = null;

        function runTimeout() {
            const display = document.getElementById('timeoutDisplay');

            // 清除之前未执行的定时器，避免干扰
            if (timeoutTimer) {
                clearTimeout(timeoutTimer);
                timeoutTimer = null;
            }

            display.innerHTML = '⏳ 等待 2 秒...';
            timeoutTimer = setTimeout(function() {
                display.innerHTML = '✅ 时间到！（只执行这一次）';
                timeoutTimer = null;
            }, 2000);
        }

        // ======================================
        //  案例 2：setInterval
        // ======================================
        let intervalTimer = null;
        let count = 0;

        function startInterval() {
            // 防止重复启动
            if (intervalTimer !== null) {
                return;
            }

            const display = document.getElementById('intervalDisplay');
            count = 0;          // 每次开始重置计数
            display.innerHTML = count + ' 次';

            intervalTimer = setInterval(function() {
                count++;
                display.innerHTML = count + ' 次';
            }, 1000);
        }

        function stopInterval() {
            if (intervalTimer !== null) {
                clearInterval(intervalTimer);
                intervalTimer = null;
                const display = document.getElementById('intervalDisplay');
                display.innerHTML = '⏸ 停止（共 ' + count + ' 次）';
            }
        }

        // 页面关闭前清理定时器（好习惯）
        window.addEventListener('beforeunload', function() {
            if (timeoutTimer) clearTimeout(timeoutTimer);
            if (intervalTimer) clearInterval(intervalTimer);
        });
    </script>

</body>
</html>

运行说明

上半部分（setTimeout）：每点一次按钮，只延迟 2 秒执行一次，之后不再变化。快速连点会重置计时，但每次依然只执行一次。
下半部分（setInterval）：点击“开始”后数字每秒增加，点击“停止”结束。你可以尝试点击开始后，立即切换到其他浏览器标签页，等 5 秒后再切回来——会发现数字瞬间跳变，这就是 setInterval 在后台被浏览器节流后产生的“堆积”现象，和 setTimeout 的行为形成对比。

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

我的AI辅助开发工具链2026版：从编码助手到工业视觉检测的全栈实践

2026年AI辅助开发已成为标配，关键在于构建高效工具链。苏州华镁莱电子算法工程师分享了工业视觉检测领域的AI工具链实践：通过统一模型入口（DreamRouter）调度多模型，结合Cursor+Copilot进行代码补全，ClaudeCode处理复杂重构，AI代码审查确保质量。在HML-vision系统中，这套工具使模型搭建效率提升8倍，重构任务耗时从2天降至3小时，缺陷发现率提高30%。核心观点