如何实现jQuery内容立即加载并每10秒自动更新？

这个问题很常见，核心原因应该是你当前只把内容更新的逻辑放在了定时器回调里，导致页面加载后必须等10秒才会第一次执行更新代码，自然就延迟显示了。咱们只需要做个小调整，让代码在页面加载时立刻跑一次，之后再按10秒间隔自动刷新就行。

修改步骤： #

• 把更新逻辑封装成独立函数：这样既可以手动触发，也能让定时器调用，复用性更强。
• 页面加载时立即执行函数：确保初始内容直接显示出来。
• 设置定时器重复执行函数：维持每10秒更新的需求。

修改后的完整代码示例： #

// 封装内容更新的核心逻辑
function updateContent() {
  const hr = new Date().getHours();
  for (var i = 0; i < data.length; i++) {
    if (hr >= data[i][0] && hr <= data[i][1]) {
      $("#someContent").html(data[i][2]);
      break;
    }
  }
}

// 页面加载完成后立刻执行一次，显示初始内容
updateContent();

// 设置定时器，每10秒（10000毫秒）自动更新一次
setInterval(updateContent, 10000);

如果你用了jQuery的DOM就绪事件： #

如果你的代码是放在$(document).ready()里确保DOM加载完成后执行的，那把整个逻辑放进去就行：

$(document).ready(function() {
  function updateContent() {
    const hr = new Date().getHours();
    for (var i = 0; i < data.length; i++) {
      if (hr >= data[i][0] && hr <= data[i][1]) {
        $("#someContent").html(data[i][2]);
        break;
      }
    }
  }

  // 立即显示内容
  updateContent();
  // 定时刷新
  setInterval(updateContent, 10000);
});

这样修改后，页面一加载就会立刻执行updateContent()显示对应内容，之后每10秒自动刷新一次，完全符合你的需求啦～

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