배열을 반복하는 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); 
    }); 
} 

와 나는 '자바 스크립트 폐쇄와 함께 할 수있는 뭔가가 있지만 의심 t의 인생에 대한 내가 찾은 다양한 코드 예제와 함께 작동하도록. 나는 경험 많은 사람들이 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);     
     }); 

    }()); 
} 

나는 루프에서 한계에 대한 계산을했다.

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

어떤 인수가 필요한지 잘 모르겠지만 실제로 알아낼 수 있습니다.