使用JavaScript/jQuery实现关联多计数器的循环延迟问题

嘿，我来帮你搞定这个两个关联计数器同步的问题！你的需求很清晰：第一个计数器从0涨到2000，每100毫秒递增一次；每当第一个数是200的倍数时，第二个计数器加1，最终两者同时完成（前者到2000，后者到10）。大概率是你的代码里没协调好递增步长和触发时机，导致不同步，下面给你具体的解决思路和代码：

核心逻辑梳理 #

要实现同步，得先算清楚关键数值：

• 第二个计数器要从0到10，意味着需要触发10次递增（对应200、400...2000这10个节点）
• 第一个计数器总时长要和第二个一致：每次间隔100ms，10次触发对应10组递增，每组需要让第一个计数器涨200，所以我们把第一个计数器的步长设为20——这样每10次递增（10*100ms=1秒），第一个数就涨200，刚好触发第二个计数器加1，10组后第一个到2000，第二个到10，完美同步。

完整代码实现 #

首先准备HTML结构，用来显示两个计数器：

<div>
  <p>计数器1: <span id="counter1">0</span></p>
  <p>计数器2: <span id="counter2">0</span></p>
</div>

然后是JavaScript+jQuery的逻辑代码：

$(document).ready(function() {
  // 初始化变量
  let count1 = 0;
  let count2 = 0;
  const target1 = 2000;
  const target2 = 10;
  const step1 = 20; // 关键步长，确保每10次递增到200的倍数
  const interval = 100; // 间隔毫秒数

  // 设置定时器
  const counterInterval = setInterval(function() {
    // 更新计数器1
    count1 += step1;
    
    // 检查是否触发计数器2的递增：当count1是200的倍数，且count2还没到目标值
    if (count1 % 200 === 0 && count2 < target2) {
      count2++;
    }

    // 更新DOM显示
    $('#counter1').text(count1);
    $('#counter2').text(count2);

    // 当计数器1达到目标值，清除定时器
    if (count1 >= target1) {
      clearInterval(counterInterval);
      // 确保最终数值准确（避免步长导致的溢出）
      $('#counter1').text(target1);
      $('#counter2').text(target2);
    }
  }, interval);
});

代码说明 #

• 步长step1=20是核心：保证每10次100ms的间隔，第一个计数器刚好涨200，触发第二个计数器加1
• 加入了边界判断：当count1达到或超过2000时立即停止定时器，并且强制设置最终数值，避免因为步长导致的微小误差
• 用count1 % 200 === 0来精准判断触发时机，确保第二个计数器只在正确的节点递增

这样运行代码后，两个计数器就会完美同步完成啦！

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