如何实现特定整点自动Ajax更新页面div？代码故障排查与修复

问题描述 #

更新说明 #

更新后的代码Ajax部分失效：14:00时未触发刷新，但页面刷新后，sticky-foot-player div会每秒频繁重载（因当前处于14点时段）。

现有PHP+JS代码如下：

<?php
    if (date('H') >= 14) { ?>
        <script>
            ;(function($){
                setInterval(function() {
                    $('.sticky-foot-player').load(location.href + ' .sticky-foot-player');
                }, 1 * 1000);
            })(jQuery);
        </script>
<?php } ?>

需求是仅在14:00:00整时刷新一次div，避免时段内每秒重复刷新。尝试添加分秒判断条件后未生效：

if (date('H') >= 14 && date('i') >= 00 && date('s') >= 00)

原问题背景 #

网站设置了分时段加载不同Mixcloud节目板块：

• 5:00-8:00加载80年代音乐页面（随机iframe）
• 8:00-11:00加载90年代音乐页面（随机iframe）

基础渲染代码：

<?php
    if (date('H') >= 5 && date('H') < 8) {
        echo '<iframe width="100%" frameborder="0" src="80s-iframe-page-path-here"></iframe>';
    }
    if (date('H') >= 8 && date('H') < 11) {
        echo '<iframe width="100%" frameborder="0" src="90s-iframe-page-path-here"></iframe>';
    }
?>

随机iframe脚本示例：

<script>
    var videos = [
        '?hide_cover=1&light=1&autoplay=1&feed=%2Fshow=path-here%2F',
        '?hide_cover=1&light=1&autoplay=1&feed=%2Fanother-show=path-here%2F',
    ];

    var index=Math.floor(Math.random() * videos.length);
    var html='<iframe width="100%" height="100" src="https://www.mixcloud.com/widget/iframe/' + videos[index] + '" frameborder="0" allow="autoplay"></iframe>';
    document.write(html);
</script>

当前问题：用户非整点进入网站时，节目会持续播放超出时段，结束后静音，体验不佳。需要实现整点自动刷新div切换对应时段节目。

解决方案 #

核心问题分析 #

1. PHP是服务器端一次性执行，无法实时监听客户端时间变化
2. 原分秒判断逻辑错误：date('i') >= 00 && date('s') >= 00几乎永远为真，无法精准定位整点
3. setInterval每秒执行会导致时段内重复刷新，浪费资源

实现代码 #

1. 优化PHP渲染逻辑（保留基础功能）

将多个if改为elseif，避免重复渲染：

<div class="sticky-foot-player">
    <?php
        $currentHour = date('H');
        if ($currentHour >= 5 && $currentHour < 8) {
            echo '<iframe width="100%" frameborder="0" src="80s-iframe-page-path-here"></iframe>';
        } elseif ($currentHour >= 8 && $currentHour < 11) {
            echo '<iframe width="100%" frameborder="0" src="90s-iframe-page-path-here"></iframe>';
        }
        // 补充其他时段判断
    ?>
</div>

2. 替换前端JS逻辑（精准整点刷新）

移除原PHP内嵌的JS，在页面底部添加以下脚本：

(function($) {
    // 计算距离下一个整点的毫秒数
    function getTimeToNextHour() {
        const now = new Date();
        const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0, 0);
        return nextHour.getTime() - now.getTime();
    }

    // 单次刷新函数，完成后设置下一次定时
    function refreshPlayer() {
        $('.sticky-foot-player').load(location.href + ' .sticky-foot-player', function() {
            setTimeout(refreshPlayer, getTimeToNextHour());
        });
    }

    // 初始化：等待到下一个整点后触发第一次刷新
    setTimeout(refreshPlayer, getTimeToNextHour());
})(jQuery);

关键说明 #

• 基于客户端时间计算，避免服务器与客户端时间差导致的触发偏差
• 仅在整点执行一次刷新，刷新完成后自动设置下一个整点的定时器，循环生效
• 无需依赖服务器端实时判断，减少服务器压力

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