航班追踪页面：弹窗可见时如何暂停自动重载机制？

项目背景与问题 #

我开发了一个追踪本区域航班的小项目：

• 通过flight-radar24 API的Python包获取数据，systemd服务每隔X秒运行Python脚本生成data.html
• 前端包含index.html、CSS、头部时钟JavaScript、本地jQuery、自动重载脚本（将data.html加载到index.html的datadiv）、弹窗管理器（点击航班显示详情弹窗）
• 当前核心问题：弹窗可见时自动重载仍会执行，导致用户来不及查看详情；尝试过clearInterval/clearTimeout、合并JS文件、提前创建弹窗div、替换setInterval为setTimeout等方法均无效

现有代码片段 #

弹窗控制代码：

$(function() {
   $('.trigger').click(function(e) {
     $('.plane_info').hide();
     $('div#e'+this.id).show();
   });

   $('.trigger').mouseleave(function(e) {
     $('div#e'+this.id).hide();
   });
});

自动重载代码：

function setupRefresh()
{
    setInterval("refreshBlock();",5000);
}

function refreshBlock()
{
    $('#datadiv').load("../data.html");
}
setupRefresh();

核心问题分析 #

1. 定时器无引用可操作：原代码中setInterval未返回并保存ID，导致后续无法通过clearInterval终止定时器
2. 动态元素事件绑定失效：每次load加载新的data.html后，原.trigger元素被替换，之前绑定的click/mouseleave事件直接失效，弹窗控制逻辑根本无法触发
3. 重载未判断弹窗状态：刷新逻辑没有检查当前是否有弹窗显示，强制刷新会直接打断用户操作

修复方案与代码调整 #

1. 重构重载逻辑，保存定时器引用 #

修改重载相关代码，将定时器ID保存到全局变量，同时增加弹窗状态判断：

// 全局变量存储定时器ID，用于后续清除/重启
let refreshIntervalId;

function setupRefresh() {
    // 用函数引用替代字符串调用，避免作用域问题
    refreshIntervalId = setInterval(refreshBlock, 5000);
}

function refreshBlock() {
    // 仅当无弹窗显示时执行刷新
    if ($('.plane_info:visible').length === 0) {
        $('#datadiv').load("../data.html");
    }
}

// 新增重启定时器的封装函数
function restartRefresh() {
    if (refreshIntervalId) {
        clearInterval(refreshIntervalId);
    }
    setupRefresh();
}

// 初始化自动刷新
setupRefresh();

2. 用事件委托处理动态元素的弹窗控制 #

由于data.html是动态加载的，.trigger元素会被频繁替换，需将事件绑定到不会被替换的父元素（如#datadiv），通过事件委托实现持久化的事件监听：

$(function() {
    // 点击触发弹窗时暂停刷新
    $('#datadiv').on('click', '.trigger', function(e) {
        clearInterval(refreshIntervalId);
        $('.plane_info').hide();
        $('#e' + this.id).show();
    });

    // 鼠标离开触发元素时关闭弹窗并恢复刷新
    $('#datadiv').on('mouseleave', '.trigger', function(e) {
        $('#e' + this.id).hide();
        restartRefresh();
    });

    // 额外处理弹窗自身的鼠标离开，避免用户移到弹窗上时误触发刷新
    $('#datadiv').on('mouseleave', '.plane_info', function(e) {
        $(this).hide();
        restartRefresh();
    });
});

3. 弹窗结构校验（可选） #

确保data.html中每个航班的弹窗元素（.plane_info）ID格式正确，比如触发元素ID为abc123，对应弹窗ID为eabc123，保持与原有逻辑一致。

效果验证 #

• 点击航班触发弹窗时，自动重载立即暂停
• 鼠标离开触发元素或弹窗区域时，自动重载恢复运行
• 弹窗显示期间，即使到达刷新时间点，也不会执行页面重载

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