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

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>

标签： javascriptloopsvariableskonvajs

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>