JQuery自增数值重置失效求助：需实现元素循环显示4次

我来帮你排查下现有代码的问题，然后给出修复方案~

原代码的核心问题 #

• 定时器重复创建：每次调用reloading()都会新建一个setInterval，执行几次后就会有多个定时器同时触发loading()，导致i的计数完全混乱，div的显示逻辑也会乱套。
• i的递增与重置逻辑错位：原代码里i的递增位置不对，没有和div的显示次数正确绑定，重置逻辑的触发时机也不符合预期。
• 字符串形式调用定时器：setInterval("loading()", 2000)这种写法容易引发作用域问题，推荐直接传递函数引用。

修复后的代码 #

JavaScript 部分

let i = 0;
const maxCount = 4;
let timer = null; // 存储定时器ID，避免重复创建

function loading() {
  // 先判断是否需要重置i
  if (i === maxCount) {
    i = 0;
  }
  
  jQuery("#text").show(1000).hide(1000, function() {
    // 完成一次显示隐藏后再递增i
    i++;
    // 仅在首次启动时创建定时器，避免重复
    if (!timer) {
      timer = setInterval(loading, 2000);
    }
  });
}

// 初始化启动
loading();

HTML 部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" style="position:relative;width:150px;height:150px;background-color:red;display:none;"></div>

修复说明 #

1. 单一定时器管理：用timer变量保存定时器ID，确保整个过程只有一个定时器在运行，彻底解决多定时器叠加的问题。
2. 逻辑顺序调整：在div完成hide动画后再递增i，保证每次显示对应正确的计数，当i达到4时，下次进入loading()会自动重置为0，实现0-3的循环。
3. 简化冗余函数：移除了多余的reloading()函数，把定时器创建逻辑整合到loading()的回调中，只在首次启动时创建一次定时器，后续复用即可。
4. 规范变量声明：用let声明变量，避免全局变量污染，同时保证变量的块级作用域。

这样修改后，div会按预期循环显示4次，然后自动重置计数，再次重复0-3的循环流程啦~

内容的提问来源于stack exchange，提问作者Juan Carlos Mariño Fernández