FOR循环遍历数组

Question

我有一个数组，我想使用for loop进行迭代，以避免过多的代码。 我想采取以下几点：

var mySchool = document.getElementById(varID[0]);
google.maps.event.addDomListener(mySchool,'click', function() {
    filterMap(layer, tableId, map);                 
});

并使其更像是：

for(var i=0; i < varID.length; i++){
    var mySchool = document.getElementById(varID[i]);
    google.maps.event.addDomListener(mySchool,'click', function() {
        filterMap(layer, tableId, map);
    }); 
}

我一直在读一些书，我怀疑它与Javascript闭包有关，但是我一生都无法使其与我发现的各种代码示例一起使用。 我希望有经验的眼睛能发现我在Javascript新手中缺少的东西。

我完整的代码如下：

//There are more items in my array but i wanted to keep it short here   
var varID = [
    "adamRobertson",
    "blewett",
    "brentKennedy"
];

var tableId = '1yc4wo1kBGNJwpDm6e-eJY_KL1YhQWfftjhA38w8';

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(49.491052,-117.304484),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer();
    filterMap(layer, tableId, map);

    //Trying to get this to work
    for(var i=0; i < varID.length; i++){
        var mySchool = document.getElementById(varID[i]);
            google.maps.event.addDomListener(mySchool,'click', function() {
                filterMap(layer, tableId, map);                 
        });
    }

    //Trying to avoid this 25 times     
    /*
    google.maps.event.addDomListener(document.getElementById(varID[0]),
        'click', function() {
            filterMap(layer, tableId, map);
    });
    */
}

// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: 'Location',
          from: tableId,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
}

// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
    var filter = [];
    var schools = document.getElementsByName('school');
    for (var i = 0, school; school = schools[i]; i++) {
      if (school.checked) {
        var schoolName = school.value.replace(/'/g, '\\\'');
        filter.push("'" + schoolName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "School IN (" + filter.join(',') + ')';
    }
    return where;
}

google.maps.event.addDomListener(window, 'load', initialize);

HTML基本上包含复选框的输入，以打开或关闭我的多边形。

在此先感谢您的帮助。

Answer 1

我认为如果将代码更改为此：

var mySchool; var limit = varID.length;
for(var i=0; i < limit; i++){
    mySchool = document.getElementById(varID[i]);
    (function(){

        google.maps.event.addDomListener(mySchool,'click', function() {
            filterMap(layer, tableId, map);                 
        });

    }());
}

我将for极限计算从循环中取出，这样也可以节省一些速度。

我没有使用过maps api，因此您可能必须在闭包中添加一些参数。

var mySchool; var limit = varID.length;
for(var i=0; i < limit; i++){
    mySchool = document.getElementById(varID[i]);
    (function(s, l, t, m){

        google.maps.event.addDomListener(s,'click', function() {
            filterMap(l, t, m);                 
        });

    }(mySchool, layer, tableId, map));
}

我不确定需要哪些args，但是您可能会发现。