Question

我确定这与范围有关，但我似乎总是在努力解决javascript范围问题。

无论如何这里是代码......

var beaches = [
      ['Surf Spot One', xxxxxx, xxxxxx, 2],
      ['Surf Spot Two', xxxxxx, xxxxxx, 1],
      ['Surf Spot Three', xxxxxx, xxxxxx, 3 ]
    ];
    var marker = [];
    for (var i = 0; i < beaches.length; i++) {
      var pos = new google.maps.LatLng(beaches[i][1], beaches[i][2]);
      marker[i] = new google.maps.Marker({
          setClickable: 1,
          position: pos,
          map: map,
          icon: surferDude,
          title:beaches[i][0]
      });
        google.maps.event.addListener(marker[i], 'mouseover', function() {
            // do something here on mouseover
                        console.log(i);
            });
    }

鼠标悬停时控制台中的输出始终为3？为什么是这样？我需要它是1或2或3，这取决于我正在鼠标移动的图标。

Answer 1

是的，这是关于范围的。调用回调时，在添加侦听器时，它将使用i的最后一个值而不是i的值。您正在构建的匿名函数是一个闭包，它在不对其进行评估的情况下捕获i变量，在调用回调之前不会对i进行求值，到那时，i将会是3。

通常的关闭破坏解决方案应该有效：

function create_listener(i) {
    return function() {
        console.log(i);
    };
}
//...
google.maps.event.addListener(marker[i], 'mouseover', create_listener(i));

你也可以使用自动执行功能而不是单独的create_listener，但这可能太吵了。

Javascript计数器没有被传递到谷歌地图功能

1 个答案: