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是＆＃34;完成＆＃34;动画的功能，应该在滚动到每一行后运行。如果我在一行上调用它，那么flashhelt工作正常，滚动条滚动很好，但没有闪烁。实际上似乎发生的是，vflash最终会在所有步骤之后被定义一次 - 我想。我尝试了使用ii或velt等在循环内定义vflash函数的各种组合，主要是获取undefs。我怎样才能让它正常工作？

Answer 1

以上由guest271314发布：链接 Looping through files for FileReader, output always contains last value from loop JavaScript closure inside loops – simple practical example 所以我需要做的是将动画设置器包装在立即调用的函数表达式（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的值，而不是循环结束时的值。

jQuery - 使用＆＃34;完成＆＃34;功能

1 个答案: