使用jQuery实现多个倒计时计时器遇数字不更新问题求助

核心问题：定时器未正确触发 #

你代码里的setInterval(countDown($(this).attr("id"), $(this).data("date")), 1000)是错误的——这里直接执行了countDown函数，把它的返回值（undefined）传给了setInterval，导致定时器只执行一次就停了。正确的做法是给setInterval传一个函数引用，而不是函数执行结果。

修复后的完整代码 #

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                // 封装单个倒计时的初始化逻辑
                function initCountdown($el) {
                    // 提前解析结束时间，避免每次计算都重复解析
                    const endTime = new Date($el.data("date")).getTime() / 1000;
                    
                    // 定义更新倒计时的函数
                    function update() {
                        const now = Date.now() / 1000;
                        const remaining = endTime - now;

                        // 倒计时结束时停止定时器并更新显示
                        if (remaining <= 0) {
                            $el.html("已结束");
                            clearInterval(timer);
                            return;
                        }

                        // 计算剩余时间各维度数值
                        const days = Math.floor(remaining / 86400);
                        const hours = Math.floor((remaining % 86400) / 3600);
                        const minutes = Math.floor((remaining % 3600) / 60);
                        const seconds = Math.floor(remaining % 60);

                        $el.html(`${days} 天, ${hours} 时, ${minutes} 分, ${seconds} 秒`);
                    }

                    // 页面加载后立即更新一次，避免延迟
                    update();
                    // 启动定时器，传递函数引用而非执行结果
                    const timer = setInterval(update, 1000);
                }

                // 遍历所有倒计时元素，逐个初始化
                $(".countdown").each(function() {
                    initCountdown($(this));
                });
            });
        </script>
    </head>
    <body>
        <div class="countdown" id="countdown-1" data-date="2023-01-06T23:59:59"></div>
        <div class="countdown" id="countdown-2" data-date="2023-01-07T23:59:59"></div>
        <div class="countdown" id="countdown-3" data-date="2023-01-08T23:59:59"></div>
    </body>
</html>

关键优化与改进点 #

• 修复定时器逻辑：通过闭包封装每个倒计时的状态（结束时间、定时器实例），确保每个定时器独立运行，避免全局变量冲突。
• 减少重复计算：提前解析结束时间为时间戳，不用每次更新都重新解析日期字符串；用取余运算符简化时间维度计算，代码更简洁。
• 处理结束状态：当倒计时结束时，自动停止定时器并显示“已结束”，避免无效的循环计算。
• 优化DOM操作：缓存jQuery元素到闭包中，避免每次更新都重复查询DOM，提升性能。
• 兼容性调整：把日期格式改为ISO标准格式（YYYY-MM-DDTHH:mm:ss），避免部分浏览器对非标准日期字符串解析出错；同时修改ID命名为符合规范的格式（避免纯数字ID）。

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