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);内的setTimeout时，此处的chromes记录：

<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，那么它就会泄漏到全球范围内。

Answer 2

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

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

setTimeout(f,i*200);

将对象传递给for循环

2 个答案: