SetTimeout on vanilla JS on [] forEach.call не работает в последовательностях

Question

Я пытаюсь анимировать все LI в последовательности, но код анимирует все LI сразу.

Я не мог найти полезный ответ в любом месте, я знаю, как это сделать в JQuery, но что-то здесь не складывается.

Я попытался добавить Timeout к обработчику события и вызываемой функции, оба подхода не работают.

Это функция

function changeLi() { 
    setTimeout(function() { 
    [].forEach.call(li, function(li) { 
     li.style.transform = "translateX(200px)"; 
    }, 900); 
    }); 
} 

Ссылка на codepen:

http://codepen.io/damianocel/pen/PzYXmv

Я пытался добавить stopPropagation/preventDefault на вызов, но это не помогло.

Answer 1

С кодом возникает несколько проблем. Во-первых, 900 не является параметром вашего setTimeout, а скорее forEach.call. Это кажется просто ошибкой.

Во-вторых, даже если выше фиксировано, ваш код будет просто набор один тайм-аут для 900ms в будущем, то перебрать все ваши li-е в списке и превратить их сразу. Я считаю, что вы действительно хотите сделать, это цикл по всем вашим элементам и определить тайм-аут для запуска в будущем, когда каждый из них запускает определенное количество времени из предыдущего. Поскольку forEach предоставляет индекс, вы можете использовать статическое количество ms и несколько его по текущему индексу вашего списка li, чтобы анимировать дальше от прямо сейчас.

Я считаю, что на самом деле вы ищете что-то вроде этого, который перебирает в список Ли, и устанавливаете преобразование происходить по каждому пункту 100мса от предыдущего:

function changeLi() { 
    [].forEach.call(li, function(li, i) { 
    setTimeout(function() { 
     li.style.transform = "translateX(200px)"; 
    }, 100 * i); 
    }); 
}