超时后仅旋转一次JS

Question

我的下面的代码有问题，我有命运之轮。但是，我只想旋转一圈。

这段代码

感谢您的帮助

  // 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) 
  
  // Delay and set to normal state
  setTimeout(function () {
    box.style.setProperty("transition", "initial");
    box.style.transform = "rotate(90deg)";
  }, 6000);

Answer 1

要将轮子旋转限制为 1，请使用

boolean

标志来跟踪它，该标志检查轮子是否已经旋转。所以说

click

事件触发后触发的回调是

spinWheel()

。

// Add this line at the beginning of your script
let hasWheelSpun = false;

// Process
function spinWheel() {
  // Check if the wheel has already been spun
  if (hasWheelSpun) {
    return;
  }

  // Set hasWheelSpun to true to indicate the wheel has been spun
  hasWheelSpun = true;

  box.style.setProperty("transition", "all ease 5s");
  // ...rest of your code

  // Alert
  // ...rest

  // Delay and set to normal state
  // ...rest
}

document.getElementById("spinButton").addEventListener("click", spinWheel);