JavaScript异步请求：优化文件修改时间监控与页面刷新机制

function fetchHeader(url, wch) {
    try {
        var req = new XMLHttpRequest();
        req.open("HEAD", url, false); // 这里的 'false' 标志着同步请求
        req.send(null);
        if (req.status == 200) {
            return req.getResponseHeader(wch);
        } else return false;
    } catch (er) {
        return er.message;
    }
}

window.setInterval(function() {
    var time = Date.parse(fetchHeader("Akut.txt", 'Last-Modified'));
    // ... 后续处理
}, 2500);

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的HTTP头

/**
 * 比较当前时间与文件修改时间，并更新显示
 * @param {number} lastModifiedTime - 文件最后修改时间的毫秒数
 */
const compareTimeToNow = (lastModifiedTime) => {
  let currentTime = new Date();
  // 计算与文件修改时间之间的秒数差
  let diffSec = Math.round((currentTime - lastModifiedTime) / 1000);
  // 更新页面上显示的时间
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes";

  // 判断是否需要刷新页面：页面加载超过10秒且文件在5秒内被修改过
  if ((currentTime - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload(); // 刷新页面
  } else {
    // 如果不需要刷新，则在2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * 处理XMLHttpRequest的加载完成事件
 * 当请求成功加载并接收到响应时调用
 */
function reqListener() {
  // 从响应头中获取 'Last-Modified' 时间，并转换为毫秒数
  const lastModified = new Date(this.getResponseHeader(whichHeader)).getTime();
  compareTimeToNow(lastModified); // 调用比较函数
}

/**
 * 发起HEAD请求获取文件头部信息
 */
const getHeader = () => {
  const req = new XMLHttpRequest();
  // 注册 'load' 事件监听器，当请求成功完成时触发 reqListener
  req.addEventListener("load", reqListener);
  // 打开HEAD请求，默认是异步请求 (第三个参数省略或为true)
  req.open("HEAD", url);
  req.send(); // 发送请求
};

// 页面加载后立即发起第一次请求
getHeader();

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的HTTP头

/**
 * 比较当前时间与文件修改时间，并更新显示
 * @param {number} lastModifiedTime - 文件最后修改时间的毫秒数
 */
const compareTimeToNow = (lastModifiedTime) => {
  let currentTime = new Date();
  // 计算与文件修改时间之间的秒数差
  let diffSec = Math.round((currentTime - lastModifiedTime) / 1000);
  // 更新页面上显示的时间
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes";

  // 判断是否需要刷新页面：页面加载超过10秒且文件在5秒内被修改过
  if ((currentTime - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload(); // 刷新页面
  } else {
    // 如果不需要刷新，则在2.5秒后再次发起请求
    setTimeout(getHeader, 2500);
  }
};

/**
 * 发起HEAD请求获取文件头部信息
 */
const getHeader = () => {
  fetch(url, { method: 'HEAD' }) // 使用Fetch API发起HEAD请求
    .then(response => {
      // 检查响应是否成功 (status 200-299)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      // 从响应头中获取 'Last-Modified' 时间，并转换为毫秒数
      const lastModified = new Date(response.headers.get(whichHeader)).getTime();
      return lastModified;
    })
    .then(lastModified => compareTimeToNow(lastModified)) // 将获取到的时间传递给比较函数
    .catch(error => {
      console.error("Error fetching header:", error);
      // 错误处理：例如，可以停止定时器或重试
      setTimeout(getHeader, 2500); // 错误时也尝试在2.5秒后重试
    });
};

// 页面加载后立即发起第一次请求
getHeader();