立即设button.disabled = true并改文字为“加载中…”，在fetch().finally()中恢复；CSS用伪元素加旋转圆圈，禁用状态需同时设pointer-events: none防移动端误触。
点击按钮后怎么让“加入购物车”变灰并显示加载中？
用户点下按钮的瞬间，必须立刻反馈“已收到”，否则容易误点多次。核心不是加动画，而是禁用交互 + 视觉提示同步变化。
- 立即设置
button.disabled = true，防止重复提交 - 同时把按钮文字从“加入购物车”改成“加载中…”或“添加中”
- 用 CSS 控制文字颜色、背景色和光标（
cursor: not-allowed）保持一致 - 不要依赖 JS 异步完成后再禁用——那已经晚了，用户可能连点两下
<button id="add-cart-btn">加入购物车</button>
JS 里这样写：
const btn = document.getElementById('add-cart-btn');btn.addEventListener('click', async () => { btn.disabled = true; btn.textContent = '加载中...'; try { await fetch('/api/cart', { method: 'POST' }); } finally { btn.disabled = false; btn.textContent = '加入购物车'; }});
CSS 实现按钮内嵌旋转小圆圈（不依赖第三方图标库）
纯 CSS 就能画一个轻量级加载指示器，避免额外请求 SVG 或字体图标。关键在用 @keyframes 配合 border 和 transform。
立即学习“前端免费学习笔记（深入）”；
- 加载状态时，把原文字隐藏，用伪元素
::after渲染旋转圆圈 - 圆圈大小建议设为
1em，和文字字号对齐，避免跳动 - 动画时长控制在
0.8s左右，太快看不清，太慢显得卡顿 - 注意给
button设position: relative，否则伪元素定位会偏
button.loading::after {</code><br><code> content: '';</code><br><code> position: absolute;</code><br><code> left: 50%;</code><br><code> top: 50%;</code><br><code> width: 1em;</code><br><code> height: 1em;</code><br><code> margin: -0.5em;</code><br><code> border: 2px solid transparent;</code><br><code> border-top-color: #fff;</code><br><code> border-radius: 50%;</code><br><code> animation: spin 0.8s linear infinite;</code><br><code>}</code><br><code>@keyframes spin {</code><br><code> to { transform: rotate(360deg); }</code><br><code>}为什么不能只靠 setTimeout 模拟加载？
开发时常用 setTimeout 做假请求测试，但上线后极易暴露问题：
真实网络延迟不可控，
setTimeout(500)可能在 200ms 就返回，也可能卡到 3s用户看到按钮恢复，却没收到添加成功的 toast，会怀疑失败
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
更糟的是：如果接口实际失败，而你没处理
catch，按钮就永远卡在“加载中…”必须把 loading 状态绑定到真实异步流程（
fetch/axios的 pending → fulfilled/rejected）finally块里重置 UI 是底线，哪怕出错也要放行按钮如果后端响应慢，考虑加个超时控制：
AbortSignal.timeout(8000)（现代浏览器支持）
移动端点击区域小，加载中状态更要防误触
手机上手指一按就是整个按钮，如果加载期间仍可点击（比如 disabled 没生效），可能触发两次请求，导致重复加购。
-
button[disabled]在 iOS Safari 里有时仍响应click，得补一层pointer-events: none - 不要用
opacity: 0.6代替disabled，它只是看起来不可点，实际还能触发事件 - 加载中按钮宽度别收缩（比如用
display: none隐藏文字），否则布局抖动影响操作
稳妥写法：
button:disabled { opacity: 0.7; pointer-events: none; background-color: #999;}
真实场景里，loading 状态的边界比想象中模糊：接口可能 200 但 body 返回 {"code":500}，或者网络中断没进 catch。这些细节不处理，动画再好看也没用。
