影院選座系統前端交互設計：JS 狀態管理與後端併發控制

錯誤直覺

「點擊座位即變色並更新數據庫」會導致：

• 高頻 AJAX 請求（每秒數十次），服務器壓力大。
• 併發衝突：用戶 A、B 幾乎同時點擊同一座位，最後寫入者覆蓋先寫入者。
• 用戶取消選座需再次請求，體驗差。

正確架構

1. 前端純本地狀態：座位圖為 JS 對象 seats = {id: {status: 'available'|'selected'|'sold', ...}}，點擊切換 available <-> selected，僅修改 DOM class（.selected），**不發請求**。
2. 提交訂單時批量發送：用戶點擊「確認下單」，收集所有 status==='selected' 的座位 ID，一次 POST /api/orders 傳遞 {seatIds: [...]}。
3. 後端樂觀鎖/悲觀鎖：
   • 悲觀：SELECT * FROM seats WHERE id IN (...) FOR UPDATE，檢查狀態均為 available，更新為 locked，生成訂單，提交事務釋放鎖。
   • 樂觀：座位表加 version 列，更新時 WHERE id=? AND version=?，失敗則回滾提示用戶重選。
4. 超時釋放：訂單創建後啟動延遲任務（Redis TTL / Quartz），15 分鐘未支付自動釋放座位。

關鍵體驗優化

• WebSocket / SSE 實時推送座位狀態變更，多標籤頁同步。
• 選座倒計時可視化，避免用戶焦慮。