本文介绍通过布尔标志控制轮盘旋转次数的核心方法，解决多次点击触发重复动画的问题，结合 css 过渡与 javascript 定时逻辑，实现“仅一次旋转”的健壮交互体验。
本文介绍通过布尔标志控制轮盘旋转次数的核心方法，解决多次点击触发重复动画的问题，结合 css 过渡与 javascript 定时逻辑，实现“仅一次旋转”的健壮交互体验。
在开发幸运轮盘（Wheel of Fortune）类交互组件时，一个常见且关键的需求是：用户无论点击多少次“开始旋转”按钮，轮盘都只执行一次完整旋转动画。若不加限制，连续点击将导致 transform 和 transition 属性被反复覆盖，引发动画中断、错位、音效重叠甚至弹窗重复弹出等异常行为。
核心解决方案是引入一个状态标志变量（state flag）——使用 let hasWheelSpun = false 在全局作用域声明，并在旋转逻辑入口处进行原子性校验：
let hasWheelSpun = false;
function spinWheel() {
// ✅ 关键防护：已旋转则立即退出，杜绝重复执行
if (hasWheelSpun) return;
// ? 标记为已旋转（注意：此赋值必须在验证之后、动画启动之前）
hasWheelSpun = true;
// 启动旋转动画（5秒缓动旋转至目标角度）
box.style.setProperty("transition", "all ease 5s");
box.style.transform = `rotate(${Hasil[0]}deg)`;
element.classList.remove("animate");
setTimeout(() => {
element.classList.add("animate");
}, 5000);
// 播放音效并显示获奖弹窗（5.5秒后）
setTimeout(() => {
applause.play();
swal(
"Congratulations",
`You Won The ${SelectedItem}.`,
"success"
).then(() => {
// 可选：跳转或提交结果
// window.location.href = `submit.php?id=${id}`;
});
}, 5500);
// ? 6秒后重置轮盘至初始角度（90deg），但保持禁用状态
setTimeout(() => {
box.style.setProperty("transition", "initial");
box.style.transform = "rotate(90deg)";
}, 6000);
}
// 绑定事件（假设按钮 ID 为 'spinButton'）
document.getElementById("spinButton").addEventListener("click", spinWheel);
⚠️ 重要注意事项：
- hasWheelSpun 的赋值 hasWheelSpun = true 必须放在 if (hasWheelSpun) return 之后、任何异步操作（如 setTimeout）之前，否则仍可能因竞态条件导致多次进入；
- 若需支持“重置后再次抽奖”，应在重置逻辑末尾手动设置 hasWheelSpun = false（例如在弹窗确认回调或页面刷新后）；
- 配合 UI 反馈更佳：点击后可临时禁用按钮（spinButton.disabled = true）并恢复文字（如“已抽奖”），提升用户体验一致性。
该方案轻量、可靠、无依赖，适用于原生 JS 项目，是控制一次性动画行为的标准实践。
