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");
        }
    });
}

In the above code example, by the time I get around to executing animate’s complete function, thisId represents the last assigned value from the for loop NOT the value that I wanted to pass in for each iteration of the loop. Is there a way to get it to access the correct thisId?

Answer 1

JavaScript does not have block scope. You can create a new scope by calling a function. 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`
}

Variables declarations area always hoisted to the top of the function. So even if you have the declaration inside the loop, it is actually the same as:

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

Every closure you create inside the loop references the same thisId. It’s like in Highlander: “There can be only one.”