JavaScript中涉及懒惰的一种奇怪行为

Question

JavaScript中奇怪的“懒惰”行为。这个工作正常：

$(document).on("change", "#dropdown-menu-category-chk", function(){ 
    $("#dropdown-menu-category input[type='checkbox']").prop('checked', this.checked); 
}); 

$(document).on("change", "#dropdown-menu-category2-chk", function(){ 
    $("#dropdown-menu-category2 input[type='checkbox']").prop('checked', this.checked); 
}); 

$(document).on("change", "#dropdown-menu-category3-chk", function(){ 
    $("#dropdown-menu-category3 input[type='checkbox']").prop('checked', this.checked); 
}); 

// and so on.... 

但是在这段代码中变量i == 5！

function setDropDowns(){ 
    var idList = ['category', 'category2', 'category3', 'category4', 'category5'] 
    for(var i = 0; i < idList.length; i++){ 
    $(document).on("change", "#dropdown-menu-"+idList[i]+"-chk", function(){ 
     $("#dropdown-menu-" +idList[i] +" input[type='checkbox']").prop('checked', this.checked); 
     debugger; // i == 5; idList[i] === undefined 
    }); 
    } 
} 

即使我说

for(var i = 0; i < idList.length; i++){ 
    var id = dropDownCheckBoxItemList[i]; 
    $(document).on("change", "#dropdown-menu-"+id+"-chk", function(){ 

它不会工作，因为id将等于'category5'时的代码会被执行！

如何使用循环工作？我不想打破DRY的规则。

Answer 1

您需要在循环的每次迭代中捕获i的值。您可以通过引入新的范围与立即调用的函数表达式做到这一点：

for(var i = 0; i < idList.length; i++) { 
    (function (i) { 
     $(document).on("change", "#dropdown-menu-"+idList[i]+"-chk", function() { 
      // etc... 
     }); 
    }(i)); 
}