JavaScript本地存储时段并对比当前时间实现自动断呼的优化方案咨询

问题背景 #

数据库存储了允许用户发起通话的时段（start_time: 17:00:00、end_time: 18:00:00），前端通过接口获取该时段后存在本地变量，需要每分钟检查当前时间是否超出时段，若是则调用disconnect()断开通话。但每分钟请求服务端拿时间对比会导致应用卡顿，需要更高效的实现方式。

可行方案 #

1. 本地校验为主，定时同步时段

核心思路是只在必要时请求服务端，日常校验用本地存储的时段和本地时间完成：

• 首次请求服务端拿到start_time和end_time，既存在内存变量，也可以用localStorage持久化（避免页面刷新后丢失）
• 用setInterval每分钟执行一次本地校验逻辑，无需请求服务端
• 为了应对服务端时段更新或本地时间偏差，每1小时（或其他合理间隔）同步一次服务端的时段，更新本地存储的值

代码示例：

// 初始化时段变量
let allowedStartTime = '';
let allowedEndTime = '';

// 从服务端拉取允许通话的时段
async function fetchAllowedTime() {
  try {
    const response = await fetch(`${Url}details`, {
      method: 'POST',
      // 补充你的请求配置：headers、body等
    });
    const data = await response.json();
    allowedStartTime = data.start_time;
    allowedEndTime = data.end_time;
    // 持久化到本地存储，页面刷新后不用重新请求
    localStorage.setItem('allowedStartTime', allowedStartTime);
    localStorage.setItem('allowedEndTime', allowedEndTime);
  } catch (err) {
    console.error('拉取时段失败:', err);
  }
}

// 检查当前时间是否超出允许时段，是则断开连接
function checkAndDisconnect() {
  // 获取当前时间的HH:MM:SS格式字符串
  const currentTime = new Date().toTimeString().split(' ')[0];
  // 直接字符串比较（HH:MM:SS格式的ASCII顺序和时间顺序一致）
  if (currentTime < allowedStartTime || currentTime > allowedEndTime) {
    disconnect();
  }
}

// 初始化流程
(async function init() {
  // 先尝试从本地存储读取，避免重复请求
  const savedStart = localStorage.getItem('allowedStartTime');
  const savedEnd = localStorage.getItem('allowedEndTime');
  if (savedStart && savedEnd) {
    allowedStartTime = savedStart;
    allowedEndTime = savedEnd;
  } else {
    await fetchAllowedTime();
  }
  // 每分钟执行一次校验
  setInterval(checkAndDisconnect, 60 * 1000);
  // 每1小时同步一次服务端时段
  setInterval(fetchAllowedTime, 60 * 60 * 1000);
})();

2. 服务端主动推送时段更新（进阶方案）

如果服务端支持WebSocket或Server-Sent Events(SSE)，可以让服务端在时段发生变化时主动推送给前端，前端实时更新本地的时段变量。日常校验依然用本地时间和存储的时段完成，完全避免不必要的HTTP请求，只在时段变更时接收推送。

注意事项 #

• 字符串比较时间仅适用于严格的HH:MM:SS格式，如果是其他格式（比如带时区），需要将时间转换为时间戳后再比较
• 若担心用户篡改本地时间，可以每30分钟请求一次服务端的当前时间，和本地时间做偏差校准，或者用服务端时间做校验，但频率要控制在最低限度

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