库存实时更新需用长连接（websocket/sse）替代轮询，结合版本号校验防覆盖、精准dom更新、乐观ui交互与状态锁定。
接口返回的库存数量实时更新，核心在于“及时获取新数据”+“安全更新界面/状态”，而不是单纯轮询或硬刷新。关键要解决三个问题：如何感知变化、如何避免重复更新、如何保证 UI 一致。
用长连接替代轮询，减少无效请求
频繁轮询（如 setInterval）既浪费资源又可能漏掉瞬时变更。推荐优先使用服务端推送机制：
- WebSocket：后端在库存变更时主动推送 {skuId: "1001", stock: 42}，前端监听 message 事件后直接更新对应商品的显示
- Server-Sent Events（SSE）：适合单向通知场景，浏览器原生支持，连接自动重连，比 WebSocket 更轻量
- 若必须轮询，用防抖 + 动态间隔：用户操作（如加入购物车）后立即查一次，之后按 5s→15s→30s 递增，空闲时暂停
本地缓存 + 版本号校验，防止脏数据覆盖
多个用户或设备可能同时操作同一商品，仅靠接口返回值直接赋值会引发覆盖问题：
- 后端在返回库存时附带 version 或 updatedAt 字段
- 前端维护本地对象如
{'1001': {stock: 45, version: 123}} - 收到新响应时，先比对 version：只有新 version > 本地才更新，否则丢弃或触发冲突提示
UI 更新要绑定到具体节点，避免全局重绘
不要用 location.reload() 或整个列表重新渲染，而是精准定位：
- 给每个商品 DOM 加 data-sku-id="1001" 属性
- 更新时用
document.querySelector(`[data-sku-id="1001"] .stock-num`).textContent = newStock - 配合 CSS 过渡（如 color 变化、轻微缩放）反馈更新动作，提升感知
- 库存 ≤ 0 时同步禁用按钮并添加 class="out-of-stock"，样式统一控制
用户操作期间临时锁定本地状态
用户点击“减库存”瞬间，前端应立即乐观更新 UI，再发请求：
- 点击后立刻将显示库存减 1，并置按钮为 loading 状态
- 请求成功：服务端返回最终值，校验无误则保持；失败：还原本地值 + 提示“库存不足，请刷新”
- 期间禁止重复点击（用 disabled 或节流），避免多次提交
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
