jQuery循环进度显示异常：仅展示循环变量i的最终值

你的问题出在JavaScript的单线程执行机制上：同步循环运行速度极快，浏览器在整个循环结束前根本没机会更新页面渲染，所以最后只会显示循环变量的最后一个值。

下面是几种可行的解决办法：

方法一：用setTimeout拆分循环 #

把循环拆成逐个执行的函数，给浏览器留出渲染时间：

let i = 1;
const total = 1000;
function updateProgress() {
  $('#mycontent article').html(`${i} of total ${total}`);
  i++;
  if (i <= total) {
    setTimeout(updateProgress, 10); // 数字越小进度更新越快，可按需调整
  }
}
updateProgress();

方法二：用requestAnimationFrame（更适配渲染节奏） #

利用浏览器的渲染帧时机更新，能获得更流畅的视觉效果：

let i = 1;
const total = 1000;
function updateProgress() {
  $('#mycontent article').html(`${i} of total ${total}`);
  i++;
  if (i <= total) {
    requestAnimationFrame(updateProgress);
  }
}
requestAnimationFrame(updateProgress);

方法三：结合async/await（适合含异步操作的场景） #

如果你的循环里本来就有异步任务（比如网络请求、耗时计算），可以用这种方式：

async function updateProgress() {
  const total = 1000;
  for (let i = 1; i <= total; i++) {
    $('#mycontent article').html(`${i} of total ${total}`);
    await new Promise(resolve => setTimeout(resolve, 10)); // 此处延迟可替换为实际异步任务
  }
}
updateProgress();

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