эффект шага с петлей

Question

У меня проблемы с созданием ступенчатой ​​анимации. Я пробовал это, чтобы анимировать элементы из массива («поле») с задержкой каждого другого элемента на 10 мс. Но он не работает с setTimeout. Значение «i» добавляется после истечения таймаута. Любой совет, как это сделать ?

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
    } 

---

Любая помощь или совет apprecaited, спасибо заранее.

Answer 1

Ответ включает в себя использование IIFE, чтобы зафиксировать в примитивном значении i в момент SetTimeout выполняется.

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     (function (i) { 
      setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
     }(i)) // This copies the value. 
    } 

Answer 2

Вы можете сделать этот код намного чище, как это:

var boxes = document.getElementsByClassName('box'); 

    for (var i = 0; i < boxes.length; i++) { 
     (function (i) { 
      setTimeout(function() {boxes[i].style.transform="translateX(150px)"},i*200) 
     }(i)) // This copies the value. 
    } 

Вам не нужно, чтобы подтолкнуть их в массив для доступа к ним.

здесь является рабочей скрипкой: https://jsfiddle.net/w8wbmozs/52/