为何setInterval首次执行时next变量值不符合预期？

问题背景 #

页面展示5张图片，仅id为f1的图片默认显示，f2至f5默认隐藏。通过setInterval实现轮播功能，定义next初始值为2，预期首次轮播显示f2，但setInterval首次执行时next值变为1，导致f1总计显示10秒（两个周期），其余轮播逻辑正常。

问题原因 #

核心问题是DOM加载时机错误：你的JavaScript代码在DOM尚未完全加载完成时就执行了，此时$(".Flash")无法找到页面上的轮播元素，$(".Flash").length返回0，total变量被赋值为0。

首次执行slide函数时：

• 初始next=2，满足next > total（0）的条件
• 进入分支将next重置为1，显示#f1后直接return
• 这就导致alert弹出的next值为1，且f1会多停留一个5秒周期

解决方案 #

将轮播初始化代码包裹在DOM加载完成的回调中，确保能正确获取到所有.Flash元素：

修改后的JavaScript代码：

import {Helper} from '../../../public/js/helpers.js';

// 等待DOM完全加载后再执行轮播逻辑
$(document).ready(function() {
  const help = new Helper();

  // 下一个要显示的图片索引
  let next = 2;

  // 轮播图总数
  let total = Number($(".Flash").length);

  // 轮播执行函数
  function slide() {
    alert(next)
    // 当前显示的图片索引
    let curr_slide = next - 1;
    // 隐藏当前图片
    $(`#f${curr_slide}`).hide()
    // 获取下一张图片的id
    let next_slide_id = $(`#f${next}`).attr("id");
    // 已到最后一张，回到第一张
    if (next > total) {
      next = 1;
      $(`#f${ next}`).show();
      return
    }
    // 下一张不存在但未到末尾，跳过当前索引
    if ((next_slide_id === undefined) && (next <= total)) {
      next += 1;
      $(`#f${next}`).show();
      return;
    }

    // 显示下一张图片
    $(`#f${next}`).show()
    // 索引自增
    next += 1;
  }

  // 轮播配置
  let data = {
    "duration": 5000,
    "run": slide
  }
  // 启动轮播
  let sliden = help.set_interval(data)
});

额外检查项：确认PHP生成的HTML正确输出了5个带有.Flash类的元素，确保$(".Flash").length最终能获取到预期的5。

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