jQuery实现JSON加载进度条分步显示的问题求助

嗨，这个问题我太熟了！你遇到的核心问题是JavaScript的单线程特性——原来的同步循环会一次性执行完所有代码，浏览器根本没时间在循环过程中重绘DOM，所以进度条直接从0跳到100%。下面给你几种实用的解决方案，按需选择：

方案1：按项处理进度（和实际业务逻辑同步） #

如果希望进度条和每个JSON项的处理进度完全绑定，可以用递归+setTimeout的方式，让浏览器在每一步处理后有时间重绘：

/* PLAYLIST - total */
const totalItems = Object.keys(res).length;
const totalBarWidth = 372;
let currentIndex = 0;

function updateProgress() {
  // 计算当前进度宽度（currentIndex从0开始对应0%）
  const currentWidth = (currentIndex / totalItems) * totalBarWidth;
  $(".loader_bar").css("width", `${currentWidth}px`);

  currentIndex++;
  // 还没处理完所有项就继续
  if (currentIndex <= totalItems) {
    // 这里的延迟可以调整，比如100ms，让进度变化更清晰
    setTimeout(updateProgress, 100);
  }
}

// 启动进度更新
updateProgress();

为什么这样有效？ #

setTimeout会把下一次的进度更新放到浏览器的任务队列里，当前同步代码执行完后，浏览器会先完成DOM重绘，再执行下一次的进度更新——这样你就能看到进度条一步步填充的效果了。

如果你的每个JSON项本身还有异步操作（比如加载资源、请求接口），那可以把进度更新放到异步操作的回调里，真正做到“处理完一项，进度走一步”：

/* PLAYLIST - total */
const totalItems = Object.keys(res).length;
const totalBarWidth = 372;
let completedCount = 0;

$.each(res, function(key, item) {
  // 替换成你实际的异步处理逻辑，比如请求数据、加载图片
  handleItemAsync(item).then(() => {
    completedCount++;
    const currentWidth = (completedCount / totalItems) * totalBarWidth;
    $(".loader_bar").css("width", `${currentWidth}px`);

    // 所有项处理完成后的收尾操作
    if (completedCount === totalItems) {
      console.log("所有项处理完毕！");
    }
  });
});

// 模拟异步处理函数
function handleItemAsync(item) {
  return new Promise(resolve => {
    // 随机延迟模拟实际处理时间
    setTimeout(resolve, Math.random() * 800);
  });
}

方案2：平滑动画进度（视觉优先） #

如果不需要进度和业务逻辑严格绑定，只是想要一个流畅的视觉效果，可以用固定时间间隔的方式，让进度条在指定时长内平滑填充：

/* PLAYLIST - total */
const totalBarWidth = 372;
const totalDuration = 2000; // 总动画时长（毫秒）
const updateGap = 50; // 每50ms更新一次进度
const totalSteps = totalDuration / updateGap;
let currentStep = 0;

const progressTimer = setInterval(() => {
  currentStep++;
  const currentWidth = (currentStep / totalSteps) * totalBarWidth;
  $(".loader_bar").css("width", `${currentWidth}px`);

  // 到达终点后清除定时器，确保进度条刚好到100%
  if (currentStep >= totalSteps) {
    clearInterval(progressTimer);
    $(".loader_bar").css("width", `${totalBarWidth}px`);
  }
}, updateGap);

注意事项 #

• 永远不要在同步循环里直接更新DOM——单线程环境下，浏览器会等到所有同步代码执行完才会重绘，所以你看不到中间过程。
• 如果用jQuery的$.each，它是同步遍历，所以必须把更新逻辑拆成异步任务（setTimeout/requestAnimationFrame都可以）。
• 追求更丝滑的动画可以用requestAnimationFrame替代setTimeout/setInterval，它会和浏览器的重绘周期同步，减少卡顿。

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