Как ссылаться на переменную, как это было в цикле?

Question

С помощью следующего кода я хочу войти в консоль 1 2 и 3 в зависимости от прямоугольника под указателем. То, что я получаю, всегда является последним значением, три.

Я не понимаю, почему и как я могу решить проблему.

<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>

<div id="container"></div>
 
<script>
var stage = new Konva.Stage({
    container: 'container',
    width: 100,
    height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (var i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", function() {
     console.log(i);
    });
}
   
stage.draw();

</script>

Answer 1

Когда ваш mousemove событие происходит, i уже и всегда будет 3

Попробуй использовать let i=0 вместо var i=0, с let ваш i переменная будет в локальной области видимости цикла, поэтому будет связана с layer

Код:

 var stage = new Konva.Stage({
     container: 'container',
     width: 100,
     height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (let i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", function() {
     console.log(i);
    });
}
   
stage.draw();

<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>

<div id="container"></div>

Другой вариант - пройти i в вашу функцию обработчика:

var stage = new Konva.Stage({
    container: 'container',
    width: 100,
    height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (var i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", (function(i) {
        return function(e) { 
            console.log(i)
        };
    })(i));
}
   
stage.draw();

<script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>

<div id="container"></div>