Почему анимация ломается при двойном клике?

Question

[Webgreen Prototype]

Обычная анимация свойства opacity для анимации изчезания и появления блоков.

При обычном одиночном клике по кнопке Next анимация идёт как надо, а вот при двойном клике анимация останавливается на втором блоке и стоит как вкопанный, на клики не реагирует.
В чем может быть проблема и как можно исправить? Есть что улучшить в коде?
Вот код: https://jsfiddle.net/5xtuedvp/1/
Наглядная реализация на js:

Answer 1

[Roman]

У тебя условия только на клики, двойного нет.

Проблема в непонимании Евентов
transition у тебя длится 1s, а потом nowинкрементируется внутри setTimeout

При следующих нажатиях срабатывает if(!boxes[now + 1]) return

В кратце пользователь должен ждать секунду, чтобы заново нажать на новый цвет
Можешь в эту секунду блокировать кнопку и все сработает как должно

Что улучшить?
Именование переменных
Вложеность
Табуляция
Алгоритм (держать обычный счетчик в js и менять цвет только через название класса)