javascript - 如何在循环中引用变量？

Question

<分区>

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>