Javascript 暂停后只有一次旋转JS

发布于01月08日

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

此代码

谢谢你的帮助


  // 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);

推荐答案

要将车轮旋转限制为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);