JS定时器不触发onclick事件反而页面加载时自动启动如何解决？

问题原因 #

• 你在全局作用域直接调用了setInterval(myTimer, 1000)，页面加载完成后代码执行到这一行就会立刻启动定时器，不会等待点击事件触发。
• 你把按钮点击事件的绑定逻辑写在了myTimer定时器回调函数里，逻辑位置完全错误：每次定时器触发都会重复给按钮绑定新的点击事件，后续点击会触发多次执行，反而会引发更多问题。
• 没有做定时器重置逻辑，后续点击「下一题」的时候如果不清掉之前的定时器、重置秒数，会出现多个定时器同时运行的情况，计时会出现混乱。

修复后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <!-- 按钮可根据你的需求改成开始/下一题，逻辑通用 -->
    <button id="b1">开始答题</button>
    <p id="demo"></p>
    <script>
        var sec = 5;
        var time = null; // 先初始化定时器变量为null

        // 单独封装倒计时启动逻辑
        function startCountdown() {
            // 每次启动前先清掉之前的定时器，防止重复启动
            if(time) clearInterval(time);
            // 重置计时秒数
            sec = 5;
            // 启动新的定时器
            time = setInterval(myTimer, 1000);
        }

        // 定时器回调只负责每秒更新计时状态
        function myTimer() {
            document.getElementById('demo').innerHTML = sec + "sec.";
            sec--;
            if (sec <= -1) {
                clearInterval(time);
                document.getElementById("demo").innerHTML="Time's up!";
            }
        }

        // 页面加载完成后只绑定一次点击事件，点击时才启动倒计时
        document.getElementById("b1").onclick = startCountdown;
    </script>
</body>
</html>

逻辑说明 #

• 页面加载时仅完成点击事件绑定，不会主动启动定时器
• 每次点击按钮都会先清理历史定时器、重置计时秒数，再启动新的倒计时，刚好匹配点击「开始」「下一题」都触发新计时的需求
• 定时器回调仅负责更新计时状态，不做额外的事件绑定逻辑，避免重复绑定问题

内容的提问来源于stack exchange，提问作者astroboyee