[Solved] Doubt

Question

Why the speed of boxes become increase every time I click start button?
How can I avoid such situations?

https://sololearn.com/compiler-playground/WhUCZKwCGYWy/?ref=app

Answer 1

You can create a boolean variable to store the state of the animation.

This will make sure you can start the animation only when it is not playing.

Pressing the start button if the animation is already playing will not do anything, preventing you from stacking up your RAF calls

// add this
let isPlaying = false;

start.onclick = () => {
start.style.visibility = "hidden";

// This will make sure Animate() is called only if isPlaying is false. This codeblock will be bypassed if isPlaying is true, which was toggled internally.
if(!isPlaying){
// toggle to true
isPlaying = true;
Animate();
}
....
}

Answer 2

Thank you so much Bob_Li, it works, appreciate your knowledge 👏