Question

for (var i = 0; i < 32; i++) {
    var thisId = dropId+i;
    $("#p"+thisId).animate({ left:"+=32px" }, function(){
        if ($("#p"+thisId).position().left == 1024) {
            $("#p"+thisId).remove();
            window.console.log("removed");
        }
    });
}

在上面的代码示例中，当我开始执行animate的完整函数时，thisId表示来自for循环的最后一个赋值，而不是我想要为循环的每次迭代传入的值。有没有办法让它访问正确的thisId？

Answer 1

JavaScript没有块范围。您可以通过调用函数来创建新范围。 E.g。

for (var i = 0; i < 32; i++) {
    (function(thisId) {
        $("#p"+thisId).animate({ left:"+=32px" }, function(){
            if ($("#p"+thisId).position().left == 1024) {
                $("#p"+thisId).remove();
                window.console.log("removed");
            }
        });
    }(dropId+i)); // <-- calling the function expression and passing `dropId+i`
}

变量声明区域始终提升到函数的顶部。因此，即使你在循环中有声明，它实际上也是如下：

var i, thisId;
for(...) {
    thisId = dropId + i;
    //...
}

您在循环中创建的每个闭包引用相同的thisId。就像在Highlander中一样：“只能有一个。”

Answer 2

您需要在当前thisId周围使用闭包。

for (var i = 0; i < 32; i++) {
    var thisId = dropId+i,
        complete = (function(id) {
            return function() {
                if ($("#p"+id).position().left == 1024) {
                    $("#p"+id).remove();
                    window.console.log("removed");
                }
            }
        }(thisId));
    $("#p"+thisId).animate({ left:"+=32px" }, complete);
}

Answer 3

只需将您在匿名函数中包含的内容包装起来就可以了：

for (var i = 0; i < 32; i++) {
    (function() {
        var thisId = dropId+i;
        $("#p"+thisId).animate({ left:"+=32px" }, function(){
            if ($("#p"+thisId).position().left == 1024) {
                $("#p"+thisId).remove();
                window.console.log("removed");
            }
        });

    })();
}

在完整函数中访问变量w /

3 个答案: