将对象传递给 for 循环

passing object to for loop

本文关键字：for 循环 对象      更新时间：2023-09-26

我有一个 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;
}

这是我在setTimeout内console.log(thisLi);时的chromes日志：

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

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

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

var thisLi = $("li[data-order='"+i+"']");
var f = function() {TweenMax.to(thisLi,0.4, {css:{opacity:1}});};
setTimeout(f,i*200);
相关文章：