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));
}

我不确定需要哪些参数，但您可能会弄清楚。