异步获取文件修改时间：告别同步XHR，拥抱现代Web请求

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;
    }
}

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

// 比较时间并更新UI的函数
const compareTimeToNow = (time) => {
  let d = new Date();
  let diffSec = Math.round((d - time) / 1000); // 计算与上次修改的秒数差
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新显示为分钟

  // 如果页面加载超过10秒且文件在5秒内有修改，则重新加载页面
  if ((d - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload();
  } else {
    // 否则，2.5秒后再次获取头部信息
    setTimeout(getHeader, 2500);
  }
};

// XMLHttpRequest的事件监听器
function reqListener() {
  // 当请求完成并成功时，获取Last-Modified头部，并调用compareTimeToNow
  // 注意：this.getResponseHeader(whichHeader) 返回的是字符串，需要转换为Date对象
  compareTimeToNow(new Date(this.getResponseHeader(whichHeader)).getTime());
}

// 发起HEAD请求的函数
const getHeader = () => {
  const req = new XMLHttpRequest();
  // 监听 'load' 事件，当请求成功完成时触发
  req.addEventListener("load", reqListener);
  // 'true' 是默认值，表示异步请求
  req.open("HEAD", url);
  req.send();
};

// 首次调用以启动流程
getHeader();

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

// 比较时间并更新UI的函数（与XHR版本相同）
const compareTimeToNow = (time) => {
  let d = new Date();
  let diffSec = Math.round((d - time) / 1000);
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes";

  if ((d - pageload) / 1000 > 10 && diffSec < 5) {
    location.reload();
  } else {
    setTimeout(getHeader, 2500);
  }
};

// 使用Fetch API发起请求的函数
const getHeader = () => {
  fetch(url, { method: 'HEAD' }) // 默认是GET，需要显式指定HEAD方法
    .then(rsp => {
      // Fetch API的响应对象包含一个headers属性，它是一个Headers对象
      // 可以通过rsp.headers.get()方法获取特定头部
      return new Date(rsp.headers.get(whichHeader)).getTime();
    })
    .then(time => compareTimeToNow(time)) // 获取时间戳后传递给compareTimeToNow
    .catch(error => console.error('Error fetching header:', error)); // 错误处理
};

// 首次调用以启动流程
getHeader();