javascript - 将对象传递给 for 循环

Question

我有一个 for 循环，通过数据属性运行选择的 li。

我希望每组 Lis 都有一个交错的淡入效果。在我将动画放入 setTimeout 中之前，效果很好。 。它不是循环遍历每个 li，而是粘在数字 5 上。

JS:

for (i=0;i<6;i++) {
console.log(thisI);
var thisLi = $("li[data-order='"+i+"']");

setTimeout(function() {
TweenMax.to(thisLi,0.4, {css:{opacity:1}});
},200*i);

}

HTML

 <li data-order="1">sometext</li>
 <li data-order="1">sometext</li>
 <li data-order="2">sometext</li>
 <li data-order="3">sometext</li>
 <li data-order="2">sometext</li>
 <li data-order="3">sometext</li>

CSS

li {
    opacity:0;
}

这是我 console.log(thisLi); 时的 chrome 日志里面setTimeout :

<li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ ">​…​</li>​
,
<li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ ">​…​</li>​
]

Answer 1

当 setTimeout 回调执行时，循环已经完成，因此 i 已达到其最大值。您可以使用闭包在每次迭代时捕获 i 的值:

for (i = 0; i < 6; i++) {
    (function (i) {
        var thisLi = $("li[data-order='" + i + "']");
        setTimeout(function () {
            TweenMax.to(thisLi, 0.4, { css: { opacity:1 } });
        }, 200 * i);
    }(i));
}

旁注:如果您没有在其他地方声明 i，那么它就会泄漏到全局范围内。