幸运转盘JS代码问题：如何实现仅单次旋转功能

问题分析 #

现有代码存在两个影响单次旋转功能的问题：

• 旋转结束后6秒会自动将转盘重置回初始角度（rotate(90deg)），无法保持中奖位置
• 未添加触发锁定，用户可重复触发旋转操作

修改方案 #

1. 移除转盘重置逻辑：删除最后一段将转盘恢复到初始状态的setTimeout代码，让转盘停在中奖角度
2. 添加旋转锁定机制：设置一个全局变量标记是否已完成旋转，触发旋转前先判断标记，禁止重复触发

修改后的完整代码 #

// 新增全局锁定变量，初始为未旋转状态
let hasRotated = false;

// 假设这是触发旋转的函数（比如点击事件回调）
function spinWheel() {
  // 已旋转过则直接返回，禁止重复触发
  if (hasRotated) return;
  
  // 标记为已旋转
  hasRotated = true;

  // Process
  box.style.setProperty("transition", "all ease 5s");
  box.style.transform = "rotate(" + Hasil[0] + "deg)";
  element.classList.remove("animate");
  setTimeout(function () {
    element.classList.add("animate");
  }, 5000);

  // Alert
  setTimeout(function () {
    applause.play();
    
    swal(
      "Congratulations",
      "You Won The " + SelectedItem + ".",
      "success"
    ).then(function(){
      // window.location.href= "submit.php?id=($id)";
      
    });
  }, 5500);
}

额外说明 #

• 如果需要在用户完成后续操作（比如点击弹窗确认）后才彻底锁定，可将hasRotated = true移到swal的then回调中
• 若要保留重置功能但仅允许单次触发，可在重置时将hasRotated重新设为false，但这不符合"仅单次旋转"的核心需求

内容的提问来源于stack exchange，提问作者barra al faruq