forループを使った時差効果

Question

私は、ずらしたアニメーションを作成しようとして問題があります。 私は配列（ "ボックス"）から要素を10msごとに遅延させてアニメーションを作成しようとしましたが、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

答えは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++) { 
     (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/