Strange Behavior of Loop in Javascript

Question

The following code is to generate bulletin board list. It works fine for viewing contents (eg, postId0, postId1, ...) but works as if 'i' were nPosts

I recall that in C# I had the same problem and fixed by declaring a copy of i (var copy_i = i; inside the loop), but here that didn't work either.

function loadList() {
    $.getJSON("list.php", function (json) {
        var nPosts = json.length;
        for (var i = 0; i < nPosts; i++) {
            var post = $('<ol/>', {
                class: "viewPost",
                id: "post" + i
            }).appendTo("#viewList");

            $('<li/>', {
                class: "viewPostId",
                id: "postId" + i,
                text: json[i].noteId
            }).appendTo("#post" + i);

            var memo = $('<li/>', {
                class: "viewMemo",
                id: "memo" + i,
                text: json[i].noteContent
            }).appendTo("#post" + i);

            //alerts 'nPosts' for every i.
            memo.on("click", function () { alert(i); });
        }
    });
}

I'm reading through the code now, but as a preliminary question: are you familiar with the concept of closures (and how counter variables can also be closed over)? Usually questions about strange behavior in loops arise from neglecting closures. — user1726343
– user1726343, Commented Nov 26, 2013 at 3:38

user1726343 · Accepted Answer · 2013-11-26 03:44:00Z

2

As expected, the problem was with an unforeseen closure. This line:

memo.on("click", function () { alert(i); });

creates a closure over the i variable, which is incremented all the way to the maximum value before your click handler is ever invoked.

Here is how you would provide a "dummy variable" for your handler to close over:

var handlerCreator = function (counter) { 
    return function(){
        alert(counter); // The handler now closes over the counter variable, 
                        // which cannot be accessed by other code and therefore
                        // retains the value passed in to this function (i.e. the
                        // value of i on the current iteration)
    }; 
}
memo.on("click", handlerCreator(i));

answered Nov 26, 2013 at 3:44

user1726343

Sign up to request clarification or add additional context in comments.

1 Comment

Jeffrey Goines Over a year ago

Thanks! So the dummy variable method don't work in js and should always define function creator. I thought there might be some simpler workarounds.

Sam Nunnally · Accepted Answer · 2013-11-26 03:42:18Z

1

The click functionality that alerts i is executed after the loop is complete thus it will be equal to nPosts

answered Nov 26, 2013 at 3:42

Sam Nunnally

2,3512 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Strange Behavior of Loop in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related