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的參數。這似乎只是一個錯誤。

其次，即使上面的是固定的，你的代碼將簡單的設置爲900毫秒在未來接單超時遍歷所有li的列表中的，在一次改造他們。我相信你真的想要做的就是循環所有的項目，並定義一個超時運行在未來的運行時間，每個運行一定的時間。由於forEach提供了一個索引，因此您可以使用靜態ms計數，並將其與您當前列表的li列表中的多個進行比較，以從進一步生成動畫。

我相信你實際上是在尋找這樣的事情，它會遍歷貴麗列表，並設置轉換上從以前的每個項目100毫秒發生：

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