jquery回调匿名函数关闭

Question

我在下面的两个循环中声明了变量elem ; 但是，当第一个循环中的匿名函数被调用时（在400ms fadeOut效果完成之后）， elem似乎引用了在第二个循环中分配的elem的值。 换句话说，如果将第二个循环中的elem重命名为任何其他变量名，则代码可以正常工作。

有没有办法围绕匿名函数进行闭包，以便在匿名函数的上下文中不更改elem的值？

for (var i = 0; i < outs.length; i++) {
  var elem = this.elementAtPoint(outs[i]);

  $(elem).fadeOut(400, function () {
    $(elem).removeClass("white black queen"); //UPDATE
    $(elem).show();
  });
  //$(elem).css("background", "red");
}

for (var i = 0; i < ins.length; i++) {
  var elem = this.elementAtPoint(ins[i]);
  var piece = this.board.pieceAt(ins[i]);

  $(elem).hide();

  $(elem).addClass(this.classForPiece(piece));

  $(elem).fadeIn(400);
}

Answer 1

您可以使用匿名自执行功能

for (var i = 0; i < outs.length; i++) {
    (function(elem){
        $(elem).fadeOut(400, function () {
            $(elem).removeClass("white black queen"); //UPDATE
            $(elem).show();
        });
        //$(elem).css("background", "red");
    })(this.elementAtPoint(outs[i]));
}

Answer 2

在javascript中，变量作用域由函数决定，因此可以将两个for循环包装在两个函数中。 包装函数示例：

(function(){
    //put you for loop here
})();

Answer 3

我会避免在循环中创建大量的闭包，因为它们创建了当前作用域的副本，效率很低。 相反，我只需创建一些额外的函数，然后在循环中调用它们：

var fadeInPiece = function(elem, piece){
  $(elem).hide();
  $(elem).addClass(this.classForPiece(piece));
  $(elem).fadeIn(400);
}

var fadeOutElem = function(elem){
  $(elem).fadeOut(400, function () {
    $(elem).removeClass("white black queen"); //UPDATE
    $(elem).show();
  });
}

for (var i = 0; i < outs.length; i++)
  fadeOutElement(this.elementAtPoint(outs[i]));

for (var i = 0; i < ins.length; i++)
  fadeInPiece(this.elementAtPoint(ins[i]), this.board.pieceAt(ins[i]));