Html Question posted in
Some basic documentation can be found here.

Html – only one Spin after Timeout JS

I am having problem with my below code, I have Wheels of fortune. but, I want only one spin.

this code

Thanks for help


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

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks @manday8055 solved that problem


  2. 0

    To limit wheel spin to 1, keep a track of it using a boolean flag which checks whether the wheel has already spun or not. So say the callback that triggers after click event is fired is 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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search