如何使用原生JavaScript实现可启停的间隔递增计数器动画？

原有代码问题梳理 #

• 赋值逻辑错误：多处将赋值操作=误写为比较操作==，导致启停状态切换失效
• 间隔逻辑不符合需求：使用固定间隔的setInterval，无法实现动态间隔的要求
• 阻塞线程的错误写法：空for循环会卡住JS主线程，导致页面无响应、渲染延迟
• 增量逻辑错误：固定每次加1，不符合逐次加1、加2、加3的需求
• 停止逻辑不完整：未清除定时器，就算切换状态定时器仍会持续执行

完整可运行实现 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button onclick="startCounterAnimation();">
    启动计数器动画
  </button>
  <button onclick="stopCounterAnimation();">
    停止计数器动画
  </button>
  <span id="counterHolder">10</span>
  <script>
    let counter = 10; // 计数器初始值
    let currentStep = 1; // 当前要增加的数值，从1开始
    let timeoutId = null; // 存储定时器ID
    let isRunning = false; // 运行状态标记

    function updateCounter() {
      // 增加对应步长
      counter += currentStep;
      // 更新页面显示
      document.getElementById("counterHolder").textContent = counter;
      // 步长+1，为下一次做准备
      currentStep += 1;
      // 下一次的间隔等于当前新的步长，单位秒转毫秒
      const nextDelay = currentStep * 1000;
      // 递归调用下一次更新
      timeoutId = setTimeout(updateCounter, nextDelay);
    }

    function startCounterAnimation() {
      if (isRunning) return;
      isRunning = true;
      // 第一次间隔1秒，加1
      timeoutId = setTimeout(updateCounter, 1000);
    }

    function stopCounterAnimation() {
      if (!isRunning) return;
      isRunning = false;
      // 清除待执行的定时器
      clearTimeout(timeoutId);
    }
  </script>
</body>
</html>

逻辑说明 #

• 采用setTimeout递归调用的方式实现动态间隔，每次执行完成后根据当前步长计算下一次的等待时间
• 启停逻辑加入状态判断，避免重复启动生成多个定时器导致逻辑混乱
• 停止时主动清除待执行的定时器，彻底终止动画运行

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