for循环的交错效果答案

【问题标题】：stagger effect with for loopfor循环的交错效果
【发布时间】：2016-11-15 14:07:55
【问题描述】：

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

感谢任何帮助或建议，在此先感谢您。

【问题讨论】：

标签： javascript arrays for-loop settimeout

【解决方案1】：

答案是在执行 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.
    }

【讨论】：

这会一次移动所有元素，我不知道为什么
@Matija 您是否尝试过较大的值，例如i * 100，看看它是否对您正在做的事情来说太快了？ - 我刚刚想到你在两个循环中使用了i。也许你可以把一个改成j。
是的，我什至尝试了 1000，我将“i”记录到控制台并获得了从 0 到 49 的数字，盒子数组中有 50 个元素
我在第一个超时后又添加了一个超时，超时记录为“i”，效果交错
It works for me :/

【解决方案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/

【讨论】：