如何为单setTimeout循环设置稳定交替的双间隔时长？

嘿，我懂你遇到的问题——用两个定时器确实很容易因为执行时的微小延迟逐渐不同步，毕竟JavaScript的定时器不是绝对精确的毫秒级计时。其实只需要在单循环里维护一个「当前间隔」的状态，每次循环切换间隔时长就能完美解决，完全不会出现不同步的情况。

核心思路很简单：

• 定义一个包含两种间隔时长的数组（比如[13000, 16000]）
• 在循环函数里记录当前使用的间隔索引，每次执行完就切换索引（通过取模实现循环切换）
• 每次调用setTimeout时，根据当前索引取对应的间隔时长

下面是修改后的完整代码：

$(function () {
  var $anchors = $('.fader');
  // 定义需要交替的间隔时长数组
  var intervals = [13000, 16000];
  // 初始间隔索引为0，对应第一个时长13000ms
  var intervalIdx = 0;

  (function _loop(idx) {
    $anchors.removeClass('loading').eq(idx).addClass('loading');
    // 切换间隔索引：实现0→1→0→1的循环切换
    intervalIdx = (intervalIdx + 1) % intervals.length;
    // 下次循环使用切换后的间隔时长
    setTimeout(function () {
      _loop((idx + 1) % $anchors.length);
    }, intervals[intervalIdx]);
  }(0));
});

代码关键点解释： #

• 用intervals数组存储交替时长，后续如果要新增更多交替间隔，直接修改数组即可，扩展性很强
• intervalIdx用来追踪当前要使用的间隔索引，通过(intervalIdx + 1) % 2实现0和1的循环切换，确保严格按照13000→16000→13000的顺序交替
• 整个逻辑都在一个自执行的循环函数里，没有额外的定时器实例，从根源上避免了多定时器不同步的问题
• 逻辑顺序刚好符合需求：第一次执行DOM操作后，切换间隔索引，下次等待13000ms执行第二次操作，第二次操作后切换索引，等待16000ms执行第三次，以此类推

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