JavaScript循环追踪失效？仅显示最终‘End’消息

JavaScript运行在单线程环境，主线程同时负责执行JS代码和DOM渲染。当你在同步循环里连续更新input的值时，所有的DOM更新请求都会被放到任务队列里排队，直到当前的同步代码（整个循环+最后的End赋值）执行完毕，浏览器才会执行队列里的DOM更新操作。这就导致中间的i值根本没机会被渲染出来，你只能看到最后一次的"End"。

解决方案1：用setTimeout拆分循环（简单易实现） #

把每次循环的DOM更新放到异步任务中，让浏览器有时间渲染每一步：

<form name="sform">
  <input type="text" id="smsg" name="smsg" disabled>
</form>
<script>
const sform = document.forms.sform;
sform.smsg.value = "Begin";

function updateLoop(i, max) {
  if (i >= max) {
    sform.smsg.value = "End";
    return;
  }
  sform.smsg.value = i;
  // 用setTimeout把下一次更新放到异步队列
  setTimeout(() => updateLoop(i + 1, max), 0);
}

updateLoop(0, 1000000);
</script>

注意：如果循环次数过多（比如100万次），大量setTimeout调用会导致性能问题，适合小次数循环场景。

解决方案2：用requestAnimationFrame（更适配UI渲染） #

requestAnimationFrame会和浏览器的渲染帧同步，效率更高：

<form name="sform">
  <input type="text" id="smsg" name="smsg" disabled>
</form>
<script>
const sform = document.forms.sform;
sform.smsg.value = "Begin";
let i = 0;
const max = 1000000;

function update() {
  if (i >= max) {
    sform.smsg.value = "End";
    return;
  }
  sform.smsg.value = i++;
  requestAnimationFrame(update);
}

requestAnimationFrame(update);
</script>

解决方案3：用Web Worker（适合大量计算，不阻塞UI） #

把循环计算放到Web Worker后台线程，避免阻塞主线程，通过postMessage传递结果更新UI：

1. 主页面文件：

<form name="sform">
  <input type="text" id="smsg" name="smsg" disabled>
</form>
<script>
const sform = document.forms.sform;
sform.smsg.value = "Begin";

// 创建Worker实例
const worker = new Worker('worker.js');

// 接收Worker传来的消息
worker.onmessage = function(e) {
  if (e.data.type === 'update') {
    sform.smsg.value = e.data.value;
  } else if (e.data.type === 'end') {
    sform.smsg.value = "End";
  }
};

// 向Worker发送循环参数
worker.postMessage({max: 1000000});
</script>

2. Worker文件（命名为worker.js）：

self.onmessage = function(e) {
  const max = e.data.max;
  for (let i = 0; i < max; i++) {
    // 每1000次发送一次更新，避免频繁通信影响性能
    if (i % 1000 === 0) {
      self.postMessage({type: 'update', value: i});
    }
  }
  self.postMessage({type: 'end'});
};

这种方式适合超大循环次数，后台计算不影响UI交互，还能实时看到进度。

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