сохранить значение из цикла для события

Question

как я могу сохранить значение из цикла для события,

            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] в событии щелчка.

как мне сделать что-то подобное?

Answer 1

Это общий подход к добавлению прослушивателей событий в цикле for.Это не слишком сложно - немедленно вызывайте функцию, которая вызывает addEventListener на каждой итерации цикла for.Это будет держать ваш счетчик правильно.

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-loop i в связи ск правилам .

Answer 2

Вы можете написать функцию более высокого порядка для генерации функции обратного вызова.

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

Затем вызвать эту функцию в цикле для генерации обратного вызова.

connectionPath.addListener('click', generateCB(connectionPath, features[i], markers[j]));