HTML项目因时间检测函数无限加载，求助问题排查与样式修改

我为家人开发了一款网页，用于查询祖母（即将和朋友进行为期一年的旅行）是否在国内，同时计划在网站上展示她旅行期间写的信件。但实现持续检测时间以判断祖母行程状态的功能后，页面出现无限加载问题，且无法在祖母在家时将alertbox背景色切换为#6fb05f。

一、无限加载问题的原因 #

你在JS代码中使用了while (true)死循环：

while (true){
    alertBox()
}

JavaScript是单线程语言，这个死循环会持续占用主线程，完全阻塞浏览器的事件循环——浏览器根本没有时间去渲染页面、处理用户交互或其他任务，导致页面一直处于加载状态，无法正常显示。

解决方法 #

用setInterval替代死循环，定期执行状态检测函数，这样不会阻塞主线程，浏览器能正常处理渲染和其他操作。

二、alertbox背景色动态切换实现 #

在alertBox函数中，根据行程状态的判断结果，直接修改#alertbox元素的backgroundColor样式属性即可。

修改后的完整JS代码 #

function alertBox(){
    let d = new Date();
    let epoch = d.getTime();
    // 缓存DOM元素，避免重复查询
    const alertBoxEl = document.getElementById("alertbox");
    const statusTextEl = document.getElementById("check");
    
    if (epoch > 1692136800000 && epoch < 1722038400000){
        statusTextEl.innerHTML = "On a trip!";
        alertBoxEl.style.backgroundColor = "#e36b6b"; // 旅行状态：红色背景
    }
    else{
        statusTextEl.innerHTML = "At home!";
        alertBoxEl.style.backgroundColor = "#6fb05f"; // 在家状态：绿色背景
    }
}

// 页面加载时立即执行一次，显示初始状态
alertBox();
// 每60秒检测一次状态（可根据需求调整间隔，单位：毫秒）
setInterval(alertBox, 60000);

补充说明 #

• 页面加载时先调用alertBox()，确保打开页面就显示正确状态，无需等待定时器第一次触发。
• setInterval的间隔设为60000毫秒（60秒），足够满足行程状态检测的需求，若需要更频繁的检测，可修改为更小的数值（如1000毫秒=1秒）。
• 提前缓存DOM元素（alertBoxEl、statusTextEl），避免每次执行函数都重复查询DOM，提升性能。

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