保存事件循环的值

时间:2018-12-31 14:42:59

标签: javascript for-loop events onclicklistener

我如何保存事件循环的值,

            for (var i = 0, len = features.length; i < len; i++) {
                    if (features[i].type == 'tower')

                    {
                        for (var j = 0; j < markers.length; j++) {
                            var lines = [];
                            lines.push(features[i].position);
                            lines.push(markers[j].position);

                            var connectionPath = new google.maps.Polyline({
                                path: lines,
                                geodesic: true,
                                strokeColor: '#12aab5',
                                strokeOpacity: 0.8,
                                strokeWeight: 3
                            });

                            connectionPaths.push(connectionPath);

                            connectionPath.setMap(map);
                            connectionPath.addListener('click', function() {
                                var elevator = new google.maps.ElevationService();
                                displayPathElevation(getPathVariableCode(connectionPath), elevator, map,  features[i], markers[j]);
                            });
                        }
                    }
                }

功能[i],标记[j]为空。

可能是因为它们在i和j已经不相关之后被调用。

我希望在点击事件上使用功能[i]和标记[j]。

我该如何执行这样的事情?

2 个答案:

答案 0 :(得分:1)

您也许可以编写一个更高阶的函数来生成回调函数。

bootstrap.css

然后在循环中调用此函数以生成回调。

function generateCB(connectionPath, feature, marker) {
    return function() {
        var elevator = new google.maps.ElevationService();
        displayPathElevation(
            getPathVariableCode(connectionPath), 
            elevator, 
            map,  
            feature, 
            marker
        );
    });
};

答案 1 :(得分:1)

这是在for循环中添加事件侦听器的一般方法。它不太复杂-在for循环的每次迭代中立即调用一个调用addEventListener的函数。这样可以使您的计数器正确无误。

document.addEventListener('DOMContentLoaded', function() {
  var els = document.querySelectorAll('div');
  init(els);
});

function init(a) {
  var i;

  //Just a regular for-loop..
  for (i = 0; i < a.length; i++) {
    //Invoke the fn so the listener is set immediately
    (function(j) {
      a[j].addEventListener('click', function() {
        console.log(`You clicked div number ${j}`);
      });
    })(i);
  }
}
<div id="div-0">Div 0</div>
<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<div id="div-3">Div 3</div>
<div id="div-4">Div 4</div>

如果您正在编写ES6代码,还应该考虑使用let而不是var来声明for循环i变量,因为它是scoping rules。 / p>