JavaScript无限循环Bug排查：select数组为何持续增长？

问题背景 #

调用addSel()函数时陷入无限循环，已知变量i始终无法超过select_array.length，但存在以下疑惑：

• select_array为何会不断增长？
• 猜测克隆div时触发了addSel()递归调用，但控制台显示函数仅被调用一次
• 已将克隆的select元素selectedIndex设为-1，onchange事件理论上不应触发，循环为何仍会发生？

原代码 #

JavaScript

function addSel() {
  var select_array = document.getElementsByTagName('select');
  for (var i = 0; i < select_array.length; i++) {
    var select_name_array = select_array[i].name.split("#");
    var select_div = document.getElementById(select_array[i].name);
    var name_array = select_array[i].name.split('#');
    var div_clone = select_div.cloneNode(true);
    div_clone.id = select_name_array[0] + "#" + (Number(select_name_array[1]) + 1);
    div_clone.getElementsByTagName('select')[0].selectedIndex = -1;
    select_div.insertAdjacentElement('afterend', div_clone);
  }
}

HTML

<div id="select#1">
  <select name="select#1" onchange="addSel();">
    <option value=""></option>
    <option value="opt#1">Opt #1</option>
    <option value="opt#2">Opt #2</option>
  </select>
</div>

核心原因：动态HTMLCollection的自动更新 #

document.getElementsByTagName('select')返回的是动态HTMLCollection，而非静态数组。这种集合会实时同步DOM的变化：每当你向DOM中插入新的<select>元素，该集合会自动将新元素纳入其中，length值随之增加。

你的循环逻辑正好踩中了这个特性：

1. 获取动态集合select_array
2. 遍历集合，每处理一个select就克隆出一个包含新select的div插入DOM
3. 新select插入后，select_array的length立即+1
4. 循环条件i < select_array.length永远成立，因为length的增长速度和i的递增速度同步，导致无限循环

疑问解答 #

• 无递归调用：控制台显示函数仅执行一次是正确的，克隆的select虽然带有onchange事件，但你并未触发它的选择变更操作，因此不会再次调用addSel()，循环完全来自单次函数调用内的遍历逻辑。
• selectedIndex=-1不影响循环：这个设置只是让克隆的select默认选中空选项，和当前无限循环的根源无关，循环的核心原因是动态集合的自动更新。

解决方案 #

方案1：将动态集合转为静态数组 #

把HTMLCollection转换成静态数组，这样遍历过程中集合不会随DOM变化而更新：

function addSel() {
  // 转成静态数组，切断与DOM的实时同步
  var select_array = Array.from(document.getElementsByTagName('select'));
  for (var i = 0; i < select_array.length; i++) {
    var select_name_array = select_array[i].name.split("#");
    var select_div = document.getElementById(select_array[i].name);
    var div_clone = select_div.cloneNode(true);
    div_clone.id = select_name_array[0] + "#" + (Number(select_name_array[1]) + 1);
    div_clone.getElementsByTagName('select')[0].selectedIndex = -1;
    select_div.insertAdjacentElement('afterend', div_clone);
  }
}

方案2：仅处理触发事件的select（更符合需求逻辑） #

如果你的需求是只有触发onchange的select才生成新克隆项，而非给所有select都克隆一次，应该通过event.target获取当前触发事件的元素，避免遍历所有select：

function addSel(event) {
  var select = event.target;
  var select_name_array = select.name.split("#");
  var select_div = document.getElementById(select.name);
  var div_clone = select_div.cloneNode(true);
  div_clone.id = select_name_array[0] + "#" + (Number(select_name_array[1]) + 1);
  div_clone.getElementsByTagName('select')[0].selectedIndex = -1;
  select_div.insertAdjacentElement('afterend', div_clone);
}

同时修改HTML中的onchange调用，传入事件对象：

<div id="select#1">
  <select name="select#1" onchange="addSel(event);">
    <option value=""></option>
    <option value="opt#1">Opt #1</option>
    <option value="opt#2">Opt #2</option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者Phil