JS点击计数到100万功能仅计数到9627问题求助

• 递归调用栈溢出：你的代码中count函数内部循环调用自身，且传入的参数i没有被函数接收使用，循环逻辑完全无效，只会不断触发新的函数调用。而JS引擎的调用栈深度存在上限（通常在1万上下），执行到9627次时触发了栈溢出异常，程序直接终止运行。
• UI渲染阻塞：现有逻辑是同步执行，JS主线程被完全占用，浏览器无法触发UI重绘，就算没有栈溢出问题，你也看不到计数的实时递增过程，只会在所有逻辑执行完毕后才会显示最终数值。

你需要取消递归逻辑，改用异步执行的方式，每次计数更新后让出主线程给浏览器做UI渲染，可参考如下实现：

<body>
  <script>
    let counter = 0;
    const TARGET_COUNT = 1000000;
    let running = false;

    async function startCount() {
      if (running) return;
      running = true;
      const displayEl = document.getElementById('display');
      while (counter < TARGET_COUNT) {
        counter++;
        displayEl.value = counter;
        // 等待下一帧渲染，保证数值变化能被用户看到
        await new Promise(resolve => requestAnimationFrame(resolve));
        // 如果觉得计数速度太慢，可以每次批量增加数值，把上面两行替换为下面的逻辑即可
        // counter = Math.min(counter + 500, TARGET_COUNT);
        // displayEl.value = counter;
        // await new Promise(resolve => requestAnimationFrame(resolve));
      }
      running = false;
    }
  </script>

  <div>
    <center>
      <button onclick="startCount();">Let's Count to 1,000,000</button>
      <input type="number" id="display" value="0">
    </center>
  </div>
</body>

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