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