jQuery - 将动画与"complete"函数结合使用

Question

我一直在尝试使用jQuery制作滚动动画，在滚动的每一步都会发生一些事情。我尝试的例子是让每一行都闪烁一种颜色。所以javascript就像

function scrCalRows() { //testing: scroll down through calendar
    // just picking certain rows, and do something
    var velt,vpos,vflash;
    var elt=$("#calendarsbody");
    elt.animate({scrollTop:0},0);  // bring to top
    var rows=$("tr");
    for (ii=0;ii<20;ii++) { // just do 100 rows
        velt = rows[ii];
        vpos = $(velt).offset().top;
        vflash = function() {flashelt(velt,'green');}
        elt.animate({scrollTop:vpos},{duration:1000,complete:vflash});
    }
}
function flashelt(oelt,colour) {
    var flashclass = "flash"+colour;
    oelt.classList.remove(flashclass); // first clear
    setTimeout(function() {oelt.classList.add(flashclass);},0)
    setTimeout(function() {oelt.classList.remove(flashclass);},2000)
}
and css
.flashgreen{
    animation-name: flashgreen;
    animation-duration: 1s;
    animation-iteration-count: 2;
}

这里vflash是动画的"完整"功能，应该在滚动到每一行之后运行。如果我在一行调用flashelt，它会很好地工作，滚动条会很好滚动，但不会闪烁。实际上似乎发生的是，在所有步骤之后，vflash最终被定义一次——我认为。我尝试了使用ii或velt等在循环中定义vflash函数的各种组合，主要是获得undefs。我怎样才能让它正常工作？

Answer 1

以上由guest271314发布：链接在FileReader的文件中循环，输出总是包含循环中的最后一个值循环中的JavaScript闭包——一个简单的实际示例因此，在这里我需要做的是将动画设置器包装在一个立即调用的函数表达式（IFFE）中，例如

for (ii=3;ii<15;ii++) {
    velt = rows[ii];
    vpos = $(velt).offset().top;
    (function(elt2,pos2) {
        vflash = function() {flashelt(elt2,'green')};
        elt.animate({scrollTop:pos2},{duration:1000,complete:vflash}
        );
    })(velt,vpos);
}

这样，vflash定义将立即获得velt和vpos的值，而不是循环结束时的值。