按钮变进度条需解耦状态与任务，用promise+abortcontroller管理请求，服务端流式响应或客户端三段式模拟进度；结构用原生button嵌套role="progressbar"，aria-live="polite"保障无障碍；css用transition平滑动画，js通过requestanimationframe或queuemicrotask批量更新dom。
点击后按钮变进度条，但不能卡死界面
JavaScript 主线程一忙，setTimeout 或 requestAnimationFrame 都救不了视觉卡顿。真正要解决的是「按钮状态切换」和「异步任务进度更新」必须解耦——别让 fetch 或 XMLHttpRequest 直接改按钮 DOM。
推荐用 Promise 包裹请求，并配合 AbortController 控制中断；进度反馈靠服务端流式响应（如 text/event-stream）或客户端分段模拟。普通场景下，先用固定三段式：启动 → 中间态（30%→70%）→ 完成，避免“假进度”引发信任问题。
- 禁用按钮同时加
aria-busy="true"，屏幕阅读器能感知 - CSS 用
transition: width 0.3s ease做平滑填充，别用 JS 逐帧 setStyle - 如果后端不支持流式返回，就别硬套进度条——改用骨架屏 + 状态文案更诚实
HTML 结构怎么写才支持无障碍和样式复用
别用 <div> 模拟按钮，原生 <code><button></button> 自带 focus、键盘回车/空格触发、禁用语义。进度条必须嵌在按钮内部，且不能破坏可访问性树结构。
<button type="button" aria-live="polite"> <span class="btn-text">提交</span> <span class="btn-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></span> </button>
aria-live="polite" 让屏幕阅读器读出进度变化；role="progressbar" 是关键，否则辅助技术识别不了这是进度控件。CSS 里用 position: relative 定位进度条，width: 0% 初始隐藏，靠 JS 动态改 aria-valuenow 和内联 style.width 同步。
- 别把
aria-valuenow设为字符串，必须是数字（el.setAttribute('aria-valuenow', 42)） - 进度条容器不能设
display: none，否则辅助技术跳过；用opacity: 0; height: 0;配合overflow: hidden隐藏未激活态 - 按钮文字和进度条共用同一
tabindex，不要给进度条单独加
JS 更新进度时为什么总不同步？
常见错误是直接在循环里连续改 aria-valuenow，但浏览器没时间重绘——得用 requestAnimationFrame 或微任务调度。尤其当进度来自 fetch 的 ReadableStream 时，chunk 太小会导致频繁重排。
正确做法：合并小幅度更新，只在关键节点（如 0%→30%→60%→100%）触发 DOM 修改；中间用 queueMicrotask 缓存值，等本轮事件循环结束再批量应用。
- 别在
for循环里直接改style.width，改完立刻读offsetWidth会强制同步布局 - 如果用
fetch().then()，进度只能靠预估（如按文件大小 / 分块数），真实进度需后端返回Content-Range或自定义 header - 移动端要注意
pointer-events: none必须加在按钮上，而不是进度条层，否则手指松开瞬间可能误触
加载详情文案怎么和进度联动又不干扰操作
详情文案不是日志滚动框，而是当前阶段的确定性描述：“正在验证身份…”、“连接服务器中…”、“生成报告…”。每句文案对应一个进度区间，且必须提前定义好，不能靠后端动态推送任意字符串——否则长度突变会撑开按钮、破坏布局。
用 CSS data-* 属性存文案映射表，JS 根据 aria-valuenow 查表切换：
<button data-status-0="准备提交..." data-status-30="验证身份..." data-status-70="生成结果..."></button>
切换时用 textContent 而非 innerHTML，避免 XSS 风险；文案变更触发 aria-live 区域播报，但要加防抖，防止 1 秒内连播三条。
- 文案长度差异超过 20% 时，按钮宽度会抖动——用
min-width锁死，或所有文案补空格对齐 - 别在 100% 后立刻清空文案，留 300ms 让用户看清“完成”，再切回原始按钮文字
- 如果详情含变量（如“已处理 12/47 条”），变量部分单独用
<span class="status-value"></span>包裹，方便 CSS 控制颜色/动画
细节都在 DOM 属性和微任务调度里，漏掉任一环，进度条就变成“动效玩具”而非可用控件。
