防抖函数用于文件上传进度监控，避免因onprogress高频触发导致UI频繁更新；它只在进度停止变化一段时间后执行提示逻辑，需支持取消、立即刷新和定时器清理，并可与节流混合优化体验。
防抖函数在文件上传进度监控中，主要用来避免因频繁触发进度事件（如 onprogress）而造成 UI 频繁更新或提示弹出。它的核心思路是：**只在进度停止变化一段时间后，才执行最终的提示逻辑**，而不是每次进度变动都响应。
为什么上传进度需要防抖？
浏览器在大文件上传时，XMLHttpRequest.upload.onprogress 或 fetch + ReadableStream 的进度回调可能每秒触发数十次。如果每次都在界面上显示“已上传 12.34%”，不仅视觉干扰大，还可能引发重绘性能问题，甚至导致提示框反复闪现、关闭。防抖能将这些密集信号“压缩”为一次有意义的反馈。
防抖函数的基本实现（带取消能力）
一个实用的防抖函数需支持手动取消（比如上传取消或失败时清理定时器），示例如下：
<!-- 简洁可复用的防抖工具 -->
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait) {
let timeoutId;
return function executedFunction(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), wait);
};
}
<p>// 使用示例：控制提示最多每 300ms 更新一次
const showProgress = debounce((percent) => {
document.getElementById('progress-tip').textContent = <code>上传中：${percent.toFixed(1)}%</code>;
}, 300);
结合上传流程的实际集成方式
在真实上传逻辑中，防抖应与上传生命周期对齐，注意三点：
-
进度回调中只调用防抖函数，不直接操作 DOM 或发通知；例如：
xhr.upload.onprogress = (e) => { if (e.lengthComputable) showProgress((e.loaded / e.total) * 100); } -
上传完成或失败时，立即触发最后一次提示（即“立刻执行”），避免用户卡在旧进度。可通过防抖函数扩展支持
flush方法，或单独调用一次原始函数。 -
销毁监听时清除防抖定时器，防止内存泄漏。可在
upload.abort()或组件卸载时调用clearTimeout（若你保留了 timeoutId 引用）或使用封装好的可取消防抖。
进阶建议：防抖 + 节流混合策略
纯防抖可能导致进度“跳变”（如从 40% 直接到 95%），体验不够平滑。更优做法是：
- 用 节流（throttle）限制最小上报间隔（如至少每 200ms 允许一次），保证进度有基本连续性；
- 再用 防抖兜底处理最后阶段（如最后 5% 变化剧烈时合并提示）；
- 对关键节点（0%、100%、失败）绕过防抖，强制立即响应。
