按钮点击后须立即禁用并显示“加载中”，请求完成后无论成功失败都通过finally还原状态，避免重复提交或按钮卡死。
点击后按钮变灰且显示“加载中”
用户点“加入购物车”时，必须立刻反馈操作已被接收，否则容易重复点击。核心是禁用按钮 + 改变文字 + 保持视觉可识别。不要只改文字，不加 disabled，否则用户仍可连点触发多次请求。
常见错误：用 setTimeout 模拟加载但没锁按钮，或用 CSS opacity 变灰却忘了移除 pointer-events —— 实际上按钮依然可点。
- 给按钮添加
disabled属性（原生语义，自动禁用交互） - 同时把文字从“加入购物车”改为
加载中...（避免纯图标导致无障碍问题） - 配合简单 CSS：比如
opacity: 0.6;或cursor: not-allowed;强化反馈
用 JavaScript 控制 loading 状态的最小代码
不需要框架也能干净实现。关键在请求前设状态、响应后还原。注意：别在 fetch 的 .then() 里直接恢复按钮 —— 如果请求失败，按钮就卡死在 loading 状态。
const btn = document.querySelector('#add-to-cart-btn');
btn.addEventListener('click', async () => {
btn.disabled = true;
btn.textContent = '加载中...';
try {
const res = await fetch('/api/cart', {
method: 'POST',
body: JSON.stringify({ sku: 'ABC123' })
});
if (!res.ok) throw new Error('添加失败');
alert('已加入购物车');
} catch (err) {
alert('网络错误，请重试');
} finally {
btn.disabled = false;
btn.textContent = '加入购物车';
}
});
用 CSS 实现更顺滑的 loading 效果（如旋转小圆圈）
纯文字变化略显干瘪，加个微动效能提升感知流畅度。重点：用伪元素或内联 ，别额外请求 loading 图片；动画要短（0.3s），否则拖慢反馈感。
- 用
::after在按钮内叠加一个旋转，初始display: none - JS 中切换类名，比如
btn.loading→ 触发display: inline-block+animation: spin 0.8s linear infinite - 文字内容保留，只是用
visibility: hidden隐藏文字，而非display: none，避免布局跳动
服务端返回慢时，要不要加超时提示？
真遇到后端卡顿，光等 loading 动画不是办法。用户 2 秒没反应就会怀疑没点上，3 秒开始烦躁。建议加简单超时兜底：
- 在
fetch外包一层Promis.e.race()，比如 5 秒未响应就报“请求超时，请重试” - 超时后仍要执行
finally块，确保按钮还原 —— 否则用户彻底无法操作 - 不要自动重试，除非明确知道是网络抖动（比如 408、504 错误码），否则可能重复下单
实际中最容易被忽略的是错误路径下的状态还原：网络断开、接口 500、JSON 解析失败……这些都会跳过 finally 吗？不会，但如果你把 btn.disabled = false 写在 then 和 catch 里两遍，就容易漏掉一种异常分支。用 finally 是最稳妥的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
