Сейчас цикл выполняется мгновенно и запускает все таймеры, которые вместе выполняются через секунду. setTimeout(timerId, 1000);
→ setTimeout(timerId, (i + 1) * 1000);
, в таком виде таймеры в цикле также запустятся сразу, но первый выполнится через секунду, второй через 2 секунды и т.д.
Но создавать функции в цикле - плохо.
let words = document.querySelectorAll(".span");
document.querySelector(".change-btn").addEventListener("click", function() {
this.disabled = true;
// for (let i = 0; i < words.length; i++) ← как там:
let i = 0; // 1. Инициализация переменной,
(function _loop() {
if (!(i < words.length)) return;
// 2. «Тело цикла» выполняется только если условие верно.
let className = words[i].dataset.id % 2 == 0 ? "right" : "left";
words[i].classList.add(className);
i++; // 3. Перед каждой итерацией.
setTimeout(_loop, 500); // Следующая итерация запустится через 0.5 секунды.
})();
});
body {
white-space: pre-line;
text-align: center;
}
span {
transition: 0.5s;
}
.right {
margin-left: 100px;
}
.left {
margin-left: -100px;
}
<button class="change-btn">Test</button>
<span class="span" data-id="8">8</span>
<span class="span" data-id="1">1</span>
<span class="span" data-id="3">3</span>
<span class="span" data-id="2">2</span>
<span class="span" data-id="5">5</span>
<span class="span" data-id="7">7</span>
<span class="span" data-id="0">0</span>
<span class="span" data-id="9">9</span>
* Оформлено немного непривычно, чтобы показать параллель с for
. Как минимум, if (!(i < words.length))
хорошо бы поменять if (i >= words.length)
Я просто новичок, и мне тяжело воспринимать все сокращения...
(function _loop() {
})();
↓ Эквивалентно (см. «IIFE, Immediately Invoked Function Expression»)
function _loop() {
}
_loop();
Где _loop — просто название функции. Создается функция, и сразу же вызывается.
if (!(i < words.length)) return;
!
— логическое "НЕ". Если в какой-то момент i
дошел до words.length
(перестало выполняться условие i < words.length), return
прерывает выполнение функии.
let className = words[i].dataset.id % 2 == 0 ? "right" : "left";
= (Число data-id делится на 2) ? Берем "right" : иначе "left"
↓ Эквивалентно (см. «Тернарный Оператор», «HTML data-атрибуты»)
let className;
if (words[i].dataset.id % 2 == 0) {
className = "right";
} else {
className = "left";
}
* dataset.id — Это всегда строка. Но операция %
автоматически превращает её в число.
setTimeout(_loop, 500);
— вызывает функцию _loop, которая вызывает setTimeout, который вызывает _loop, который вызывает setTimeout... Вызовы зацикливаются.