Javascript 具有for循环的交错效应

我在尝试制作交错动画时遇到问题。 我已经尝试过通过将数组（“长方体”）中的元素延迟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)
    }

var-box=[]
for（var i=0；i

---

---

欢迎提供任何帮助或建议，请提前感谢。

您可以使此代码更清晰，如下所示：

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.
    }

var-box=document.getElementsByClassName（'box'）；
对于（变量i=0；i

您无需将它们推入阵列中即可访问它们

---

这是一个有效的方法：

答案涉及到在执行setTimeout时使用iLife锁定原始值

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.
    }

var-box=[]
for（var i=0；i

这会同时移动所有元素，我不知道why@Matija您是否尝试过较大的值，如

i*100

，以查看它是否对您正在执行的操作太快我刚刚想到您在两个循环中使用了

i

。也许你可以将一个更改为

j

。是的，我甚至尝试了1000，我在控制台上记录了“I”，得到了从0到49的数字，方框中有50个元素。我在第一个元素旁边又添加了一个超时，该超时记录了“I”，并按照我的意愿交错显示：/