Question

我试图制作交错动画时遇到问题。我已经尝试过这个来从数组（“box”）中激活元素，并将每个其他元素延迟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)
    }

任何帮助或建议都会提前，谢谢你。

Answer 1

您可以使此代码更加清晰：

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/

Answer 2

答案涉及在执行setTimeout时使用IIFE锁定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.
    }

for循环的交错效应

2 个答案: