Why animation breaks on double click?

Question

css

Usual animation of the opacity property to animate the disappearance and appearance of blocks.
With a normal single click on the Next button, the animation goes as it should, but with a double click, the animation stops on the second block and stands rooted to the spot, does not respond to clicks.
What could be the problem and how can I fix it? Is there something to improve in the code?
Here is the code: https://jsfiddle.net/5xtuedvp/1/
Visual implementation in js:

Answer 1

You have conditions only for clicks, there is no double.
The problem is that you don't understand the Events
On the next clicks, it works . In short, the user must wait a second to click on the new color again. You can block the button in this second and everything will work as it should. What to improve? Variable naming Nesting Tabulation Algorithm (keep regular counter in js and change color only through class name) if(!boxes[now + 1]) return