JavaScript如何实现进度条_前端进度如何模拟_技术教程

用 setInterval 模拟进度条最直接，需控制数字从 0 增至 100 并绑定 DOM；requestAnimationFrame 更流畅但需时间戳计算；XMLHttpRequest 支持 onprogress 获取真实进度；AbortController 中断时须同步清理定时器或动画帧。

用 `setInterval` 模拟进度条最直接

没有真实后端接口时，前端常靠定时器“假装”加载中。核心是控制一个数字从 0 逐步增加到 100，再绑定到 DOM 元素的宽度或文本上。

关键点：别用 setTimeout 递归调用（易失控），setInterval 更可控；记得在达到 100 后 clearInterval，否则内存泄漏。

初始值设为 0，步长建议 1～5，太小卡顿，太大不平滑
间隔时间选 50～200ms，100ms 是较自然的节奏
避免在循环里频繁操作 DOM，先更新数据，再统一渲染

let progress = 0;
const timer = setInterval(() => {
  progress += 2;
  document.querySelector('.progress-bar').style.width = `${progress}%`;
  if (progress >= 100) {
    clearInterval(timer);
  }
}, 100);

用 `requestAnimationFrame` 实现更流畅的动画

当对视觉平滑度有要求（比如上传大文件预览进度），requestAnimationFrame 比 setInterval 更合适——它会自动对齐屏幕刷新率，且页面切到后台时暂停，省资源。

但注意：它不保证固定时间间隔，只保证“下一帧”，所以不能直接当计时器用，需配合时间戳计算进度比例。

记录开始时间 startTime = performance.now()
每次回调中算出已过毫秒数，除以总耗时得到 0～1 的完成比
仍需手动判断是否结束并停止递归调用

const startTime = performance.now();
const duration = 3000; // 总时长 3s
function animateProgress() {
const elapsed = performance.now() - startTime;
const progress = Math.min(100, (elapsed / duration) * 100);
document.querySelector('.progress-bar').style.width = ${progress}%;
if (progress < 100) {
requestAnimationFrame(animateProgress);
}
}
requestAnimationFrame(animateProgress);

真实请求中如何把 `XMLHttpRequest` 的 `onprogress` 接出来

只有原生 XMLHttpRequest 支持上传/下载进度事件，fetch 目前不支持（虽有提案，但未落地）。如果你用的是 axios，它底层封装了 XMLHttpRequest，可通过 onUploadProgress 或 onDownloadProgress 钩子拿到。

重点：必须设置 Content-Length（服务端要返回 Content-Length 响应头），否则 event.total 为 0，无法算百分比。

event.loaded 是已传输字节数，event.total 是总字节数
上传时用 xhr.upload.onprogress，下载时用 xhr.onprogress
某些 CDN 或代理可能过滤掉 Content-Length，导致 total === 0，此时只能显示“正在处理…”而非精确百分比

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    document.querySelector('.progress-bar').style.width = `${Math.round(percent)}%`;
  }
};
xhr.send(file);