Вариант попроще - таймауты устанавливаются одновременно всем элементам, длительность таймаута зависит от индекса элемента:
let state = true;
document.querySelector('button').addEventListener('click', e => {
state = !state;
document.querySelectorAll('circle').forEach((n, i, a) => {
setTimeout(() => {
n.classList.toggle('st0', state);
e.target.disabled = (state ? a.length - i : i + 1) !== a.length;
}, (state ? a.length - i : i) * 3);
});
});
Но, наверное, устанавливать столько таймаутов сразу не круто, так что вот
вариант посложнее - таймауты устанавливаются поочерёдно, следующий в коллбеке предыдущего, ну а длительность у всех таймаутов одинакова:
let state = true;
const button = document.querySelector('button');
const circles = document.querySelectorAll('circle');
button.addEventListener('click', () => {
state = !state;
toggleCircle(0);
});
function toggleCircle(i) {
if (i < circles.length) {
setTimeout(() => {
const index = state ? circles.length - i - 1 : i;
circles[index].classList.toggle('st0', state);
button.disabled = i !== circles.length - 1;
toggleCircle(i + 1);
}, 3);
}
}
Ну или можно вместо таймаутов
устанавливать интервал:
let state = true;
const circles = document.querySelectorAll('circle');
document.querySelector('button').addEventListener('click', function() {
this.disabled = true;
state = !state;
let i = 0;
const intervalID = setInterval(() => {
const index = state ? circles.length - i - 1 : i;
circles[index].classList.toggle('st0', state);
if (++i === circles.length) {
this.disabled = false;
clearInterval(intervalID);
}
}, 3);
});
