Issue
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);
Solution
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);
Answered By - mandy8055
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.