如何用jQuery定时检测小时，触发AJAX加载offer.php更新优惠内容

核心逻辑 #

• 用全局变量存储上一次成功加载优惠的小时数，初始值设为-1保证页面首次加载必触发请求
• 每分钟触发一次检测逻辑，仅当当前系统小时和存储的已加载小时不一致时，才发起AJAX请求拉取对应时段的优惠内容
• 请求成功后更新存储的小时标识，避免同小时内重复发起无效请求

完整实现代码 #

首先在页面中加入优惠展示容器：

<div id="offer-container"></div>

引入jQuery后加入以下JS逻辑：

// 存储上一次成功加载优惠的小时标识
let lastLoadedHour = -1;

// 优惠加载逻辑封装
function loadOfferIfNeed() {
  const nowHour = new Date().getHours();
  // 小时未更新直接跳过，不发起请求
  if (nowHour === lastLoadedHour) return;

  $.ajax({
    url: 'offer.php',
    method: 'GET',
    data: { hour: nowHour },
    success: function(offerContent) {
      // 渲染优惠内容到页面
      $('#offer-container').html(offerContent);
      // 更新已加载小时标识
      lastLoadedHour = nowHour;
    },
    error: function() {
      // 请求失败不更新标识，下次分钟检测会自动重试
      console.warn('优惠内容加载失败，稍后重试');
    }
  })
}

// 页面加载完成后执行
$(function() {
  // 立即执行一次，避免等1分钟才显示首屏优惠
  loadOfferIfNeed();
  // 每60秒执行一次检测
  setInterval(loadOfferIfNeed, 60 * 1000);
})

可选优化点 #

• 如果对时间精度要求极高，担心用户本地时间不准，可以在首次请求接口时返回服务端当前小时，后续基于本地计时累计更新小时标识，避免客户端时间异常导致的优惠错配
• 可以在请求过程中给容器加加载状态提示，提升用户体验
• 如果接口返回的是JSON格式的优惠数据，把success回调里的渲染逻辑改成对应字段取值拼接即可

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