如何解决进度条每次计算时先满100%再回落的问题？

你的进度条出现“先满格再回落”的问题，核心原因有两个：

• 在keys.forEach循环内重复给updateButton绑定change事件，每次遍历一条数据就新增一个监听。当文件选择变更时，所有绑定的事件会同时触发，progress被一次性累加所有条目数，直接跳到100%。
• 进度条更新逻辑和数据处理逻辑完全脱节：本该在处理每条数据时实时更新进度，却错误地把进度更新绑定到了按钮的变更事件上。

function readLines() {
    let progress = 0;
    let percentage = 0;
    const file = document.getElementById("fileList").value;

    fetch(`/application/${file}/lines`, {
        method: 'GET'
    }).then(response => response.json())
      .then(data => {
          const keys = Object.keys(data);
          let html = `<tr><th>Word</th><th>Occurrence</th></tr>`;

          const progressBar = document.getElementById("progress-bar");
          // 提前创建进度条填充元素，避免重复生成DOM
          progressBar.innerHTML = "<div id='loading-bar'></div>";
          const progressBarFill = document.getElementById("loading-bar");

          function updateProgressBar(progressPercent) {
              // 直接修改已有元素宽度，无需重建
              progressBarFill.style.width = `${progressPercent}%`;
          }

          // 遍历数据时实时更新进度，移除冗余事件绑定
          keys.forEach((key, index) => {
              // 按当前处理位置计算进度（index从0开始，需+1）
              percentage = ((index + 1) / keys.length) * 100;
              updateProgressBar(percentage);

              // 简化表格拼接逻辑（原if/else完全重复，无需区分）
              html += `<tr><td>${key}</td><td>${data[key]}</td></tr>`;
          });

          document.getElementById("showTable").innerHTML = html;
          // 处理完成后重置进度条
          updateProgressBar(0);
      });
}

• 将进度条填充元素的创建移到循环外，避免重复生成DOM导致的渲染波动。
• 移除循环内重复绑定的change事件，改为在处理每条数据时直接计算并更新进度。
• 简化了冗余的表格拼接判断逻辑。
• 数据处理完成后主动重置进度条状态。

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