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);这是我在里面时的 chromes 日志setTimeout：

<li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ ">​…​&lt;/li>​ , <li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ ">​…​&lt;/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其他地方声明，那么它就会泄漏到全局范围内。

Answer 2

我认为您对变量 thisLi 的范围有疑问。尝试像这样创建一个闭包：

var thisLi = $("li[data-order='"+i+"']");
var f = function() {TweenMax.to(thisLi,0.4, {css:{opacity:1}});};

setTimeout(f,i*200);