xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(reaction): guard toggle against out-of-order responses

Browse Source 
用请求代号确保只有最新一次点击的响应会写回本地状态，乐观更新的
回滚路径同样受保护，避免旧请求晚到覆盖新状态。不引入防抖、不禁用按钮。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
yuetsh
2026-08-06 03:38:24 -06:00
parent 0af91b1e20
commit e153064d87
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/oj/problem/components/ProblemReaction.vue
View File

@@ -57,6 +57,10 @@ function tooltipOf(key: ReactionKey, label: string) {
return label return label
} }
// 连续点击不做防抖、不禁用按钮，靠请求代号保证后到的旧响应不会覆盖新状态：
// 每次点击自增一次，只有仍是最新请求时才把结果写回本地状态
let requestSeq = 0
async function toggle(key: ReactionKey) { async function toggle(key: ReactionKey) {
if (!problem.value) return if (!problem.value) return
const prevMine = [...mine.value] const prevMine = [...mine.value]
@@ -69,11 +73,14 @@ async function toggle(key: ReactionKey) {
mine.value = next mine.value = next
if (counts.value) counts.value[key] += selected ? -1 : 1 if (counts.value) counts.value[key] += selected ? -1 : 1
const seq = ++requestSeq
try { try {
const res = await setReaction(problem.value.id, next) const res = await setReaction(problem.value.id, next)
if (seq !== requestSeq) return
mine.value = res.data.mine mine.value = res.data.mine
counts.value = res.data.counts counts.value = res.data.counts
} catch { } catch {
if (seq !== requestSeq) return
mine.value = prevMine mine.value = prevMine
counts.value = prevCounts counts.value = prevCounts
message.error("操作失败，请重试") message.error("操作失败，请重试")