节流用于稳定上传进度UI更新，避免高频重绘导致卡顿；其核心是固定间隔（如160ms）内最多更新一次，丢弃中间值，不改变上传速度；防抖不适用，因进度持续增长不会真正停止。
文件上传进度更新本身是高频事件，比如 XMLHttpRequest.upload.onprogress 或 fetch + ReadableStream 场景下，每毫秒都可能触发多次。若每次进度变化都直接更新 UI（如进度条、百分比文本），不仅造成大量无意义的 DOM 重绘，还可能因频繁调用导致主线程卡顿。这时用节流控制更新频率，不是为了“省请求”，而是为了“稳渲染”。
节流更新进度的核心逻辑是：固定时间间隔内最多刷新一次 UI，丢弃中间过渡值
- 进度事件本身不可控（由浏览器底层触发），但 UI 更新可主动节制
- 节流不改变上传速度或数据流，只约束“用户看到的变化节奏”
- 推荐使用时间戳版节流（轻量、无定时器堆积风险），延迟设为 100–200ms 即可兼顾流畅与性能
以下是一个实用的节流进度处理器示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function throttleProgress(updateFn, delay = 160) {
let lastTime = 0;
return function (progressData) {
const now = Date.now();
if (now - lastTime >= delay) {
updateFn(progressData);
lastTime = now;
}
};
}
// 使用示例（XMLHttpRequest）
const xhr = new XMLHttpRequest();
const throttledUpdate = throttleProgress((e) => {
const percent = Math.round((e.loaded / e.total) * 100);
document.getElementById('progress-bar').style.width = `${percent}%`;
document.getElementById('progress-text').textContent = `${percent}%`;
});
xhr.upload.onprogress = throttledUpdate;为什么不用防抖？
防抖会等到“完全停止触发”才更新，但上传进度是持续增长的，不会真正“停止”直到完成。若用防抖，你可能在最后 1% 卡住几百毫秒才刷新，造成明显滞后感。节流则保证每 160ms 至少刷一次，视觉更连贯。
进阶建议：
立即学习“Java免费学习笔记（深入）”；
- 若需更高精度反馈（如大文件上传），可在 95% 之后自动缩短节流间隔（例如切到 50ms）
- 配合
requestAnimationFrame做最终帧对齐：节流函数内不直接操作 DOM，而是用raf批量提交更新 - 对
fetch + ReadableStream场景，节流应作用于reader.read()后的解析逻辑，而非流本身
不复杂但容易忽略
