Figure doesn't show correct string on event

Question

In the following code I create 3 boxes with the text 1 to 3, in a fourth box I'd like to show the text of the box my mouse is hovering over. So i set an onMouseEnter FProperty for each of the boxes where I change the string of the fourth box and tell it to redraw.

bool redraw = false;
str s = "0";
Figure getTextbox() {
    return computeFigure(bool() {bool temp = redraw; redraw = false; return temp; },
    Figure() {
        return text(str() {return s; });
    });
}

list[Figure] boxes = [];
for (i <- [1..4]) {
    boxes += box(text(toString(i)), onMouseEnter(void () {s = toString(i); redraw = true; }));
}

Figure changer = box(getTextbox());
render(vcat(boxes + changer));

However, for some odd reason all three boxes will tell the onMouseEnter method to change the text of the fourth box into "3" (the value of the last box) instead of their individual value.

Any clue why? Thanks!

Answer 1

Ah yes, this is the variable capturing closure problem with for loops, also known from other languages which have this particular feature like Javascript. This is the code with the issue:

for (i <- [1..4]) {
    boxes += box(text(toString(i)), onMouseEnter(void () {s = toString(i); redraw = true; }));
}

The variable i is bound by the void closure and not its value. So every time the function which is created and passed to onMouseEnter it will read the latest value of the i variable. Since the callback is called after the loop terminates, all calls to the mouse enter function will have the value 3.

To fix this and "do what you want", the following code would work I believe:

for (i <- [1..4]) { 
        newS = toString(i);
        boxes += box(text(toString(i)), onMouseEnter(void () {s = newS; redraw = true; }));
    }

This works because for every pass of the for loop a new environment is created which binds the newS variable. So you'll get a fresh newS for every loop instead of the reused i.