如何使用jQuery实现指定秒数触发文本、图片等内容切换效果

核心逻辑是通过计时器每秒更新计时变量，匹配预设的时间规则触发对应内容更新：

基础实现（匹配你的需求） #

<!-- 内容展示容器 -->
<div class="messages"></div>
<!-- 请先自行引入jQuery库 -->
<script>
// 初始化计时变量，单位为秒
let secondCount = 0;

// 启动每秒执行的计时器
const timer = setInterval(() => {
  secondCount++;
  
  // 匹配时间规则执行对应操作
  if (secondCount === 5) {
    $(".messages").text("hello");
  } else if (secondCount === 10) {
    $(".messages").html("<img src='img/image.jpg' alt='展示图片'>");
  }
  // 可继续添加else if扩展更多时间点规则
  
  // 可选：到最大计时时间后停止计时器，避免资源浪费
  if (secondCount >= 30) {
    clearInterval(timer);
  }
}, 1000) // 1000毫秒=1秒，每秒触发一次
</script>

可扩展优化版本 #

如果定时规则较多，不建议写大量if else判断，可通过配置表管理所有规则，后续新增规则仅需修改配置数组即可：

let secondCount = 0;
// 所有定时规则统一维护在该配置数组中，新增规则直接追加对象即可
const timeRules = [
  {
    time: 5,
    handler: () => $(".messages").text("hello")
  },
  {
    time: 10,
    handler: () => $(".messages").html("<img src='img/image.jpg' alt='展示图片'>")
  },
  // 新增规则示例：第15秒展示红色提示文本
  {
    time: 15,
    handler: () => $(".messages").html("<p style='color:red'>计时结束</p>")
  }
]

const timer = setInterval(() => {
  secondCount++;
  // 匹配当前时间对应的规则并执行
  const currentRule = timeRules.find(item => item.time === secondCount);
  currentRule && currentRule.handler();
  
  // 匹配到最大时间点后自动停止计时器
  if (secondCount >= Math.max(...timeRules.map(item => item.time))) {
    clearInterval(timer);
  }
}, 1000)

注意事项 #

• 计时器1000毫秒的间隔存在极小的触发误差，不要用小于等于/大于等于判断特定时间点的规则，避免重复触发
• 如果需要页面加载后立即执行初始渲染，可在计时器外先执行一次规则匹配逻辑

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