按钮点击后文字消失但loader不显示，根本原因是DOM渲染与CSS display切换不同步；应改用CSS类控制可见性、确保loader为按钮子元素且正确对齐，并通过disabled属性防重复提交。
按钮点击后文字消失但 loader 不显示？检查 display 切换逻辑
常见现象是：textContent 被清空了，loader 元素却没出来，或者一闪就没了。根本原因是 DOM 渲染时机和 CSS display 切换不同步——你可能在 JS 里刚设完 button.textContent = ''，又立刻设回原文字，中间没给浏览器重绘机会。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要手动操作
textContent或innerHTML来“隐藏文字”，改用 CSS 控制可见性（比如visibility: hidden或opacity: 0） - loader 元素必须初始为
display: none，点击后改为display: inline-block（或匹配按钮内联流的值） - 确保 loader 是按钮的子元素，且没有被父级
overflow: hidden截断 - 避免在同一个事件回调里反复切换
display，容易触发浏览器强制同步布局
用 class 切换比直接改 style 更可靠
直接写 btn.style.display = 'none' 或 loader.style.display = 'block' 看似简单，但容易和外部 CSS 规则冲突（比如 !important、媒体查询、CSS-in-JS 动态注入），也难维护状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义两个 class：
.is-loading（作用于按钮）和.loader（loader 元素默认有） -
.is-loading .btn-text→visibility: hidden；.is-loading .loader→display: inline-block - JS 里只做
button.classList.add('is-loading')和button.classList.remove('is-loading') - 如果用 Vue/React，把
is-loading绑定到组件 state，避免手动 DOM 操作
异步完成后恢复按钮，但用户又点了两次？防重复提交必须加锁
典型错误：没禁用按钮，接口还没返回，用户连点两下，fetch 发了两次，loader 闪两次，状态错乱。这不是样式问题，是控制流没闭环。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 点击瞬间立即
button.disabled = true（同时加.is-loading） - 无论成功或失败，都必须在
finally块里button.disabled = false和button.classList.remove('is-loading') - 不要只依赖接口 success 回调来恢复——网络超时、Promise.reject、甚至
AbortError都会导致 loader 卡死 - 如果按钮本身有
type="submit"，记得event.preventDefault()，否则表单可能绕过 JS 直接触发提交
Loader 图标不居中或尺寸异常？检查 inline 元素的 vertical-align
SVG 或 <span></span> 写的 loader 常见偏上、偏下、挤扁。这是因为按钮是 inline 或 inline-flex，而 loader 默认按字母基线对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 loader 加
vertical-align: middle（不是center，那个无效） - 如果按钮用了
flex布局，loader 应该设margin: auto或用align-items: center控制 - 避免 loader 使用
width/height百分比——父容器没宽高时会塌缩，固定像素或em更稳 - 用
transform: scale(0.8)缩放 SVG 时，注意是否触发了父级overflow: hidden裁剪
