javascript - for 循环和动画，不能使用变量，因为由于关闭而改变

Question

我有这个代码:

   var newTR = '<tr class=".small"></tr>';
   var i=300, v=0;

    for (var product in products){
        i=i+300;
        v++;

        var newTD+v =
            '<td>'+'img'+'</td>'+
                '<td>'+products[product].partNumber + ' ' + products[product].description+'</td>'+
                '<td class="productPrice">' + toDollars(products[product].price) + '</td>'+
                '<td class="productQty">'+products[product].qty+'</td>'+
                '<td>'+ products[product].price * products[product].qty+'</td>'+
                '<td><button class="removeProductClass">x</button></td>';

        $(newTR)
            .delay(i)
            .insertAfter(self.cartTableHeader)
            .switchClass( "small", "big", 500, "easeInOutQuad")
            .queue(function(){
                $(this).append(newTD)
                    .children()
                    .hide()
                    .fadeTo(1000, 1);
                    $(this).dequeue();
                })
            .queue(function(){
                self.calcSubTotal();
                $(this).dequeue();
                });


    }
}

问题是我最终得到了 newTD 变量的相同值 因为闭包使用的是在 newTD 上设置的最后一个值 由于动画稍后发生，当 for 循环已经完成时..

如何克服这一点？ :(

感谢阅读，

肖恩。

Answer 1

将有问题的代码包装在一个自执行函数中，如下所示:

       (function(newTD){
          $(newTR)
            .delay(i)
            .insertAfter(self.cartTableHeader)
            .switchClass( "small", "big", 500, "easeInOutQuad")
            .queue(function(){
                $(this).append(newTD)
                    .children()
                    .hide()
                    .fadeTo(1000, 1);
                    $(this).dequeue();
                })
            .queue(function(){
                self.calcSubTotal();
                $(this).dequeue();
                });
       })(newTD);