jquery 回调匿名函数闭包答案

【问题标题】：jquery callback anonymous function closurejquery 回调匿名函数闭包
【发布时间】：2013-05-09 03:39:32
【问题描述】：

我已经在下面的两个循环中声明了变量elem；但是，当第一个循环中的匿名函数被调用时（在 400 毫秒 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);
}

【问题讨论】：

javascript没有块作用域，只有函数定义作用域
out 是什么？您可以使用 jQuery 的 $.each 循环数组和对象，这会创建一个新范围。
您可以了解更多关于JavaScript Hoisting

标签： javascript jquery callback anonymous-function

【解决方案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]));
}

【讨论】：

【解决方案2】：

在javascript中，变量范围是由函数决定的，所以你可以将两个for循环包装在两个函数中。一个包装函数示例：

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

【讨论】：

【解决方案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]));

【讨论】：