如何高效检查大量动态输入框中的重复值？

你的原始方案每次输入都遍历所有输入框，在1400个元素的场景下会带来明显的性能损耗，以下是两种更高效的实现思路，核心是减少重复遍历次数和降低单次检查的时间复杂度：

一、核心优化方向 #

1. 用防抖减少触发频率 #

用户输入时keyup会频繁触发（比如快速打字时每秒触发多次），先加防抖逻辑，延迟300-500ms再执行检查，避免不必要的重复计算。

2. 维护值的计数映射 #

用Map存储每个输入值的出现次数，把每次检查的时间复杂度从O(n)降到O(1)，无需遍历所有元素。

二、具体实现代码 #

// 防抖函数：延迟执行逻辑，避免频繁触发
function debounce(func, delay = 300) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 存储每个值的出现次数
const valueCountMap = new Map();

// 初始化统计所有输入框的值
$('.request').each(function() {
  const val = $(this).val().trim();
  if (val) {
    valueCountMap.set(val, (valueCountMap.get(val) || 0) + 1);
  }
  // 保存当前值到元素的data属性，后续变化时用
  $(this).data('prevVal', val);
});

// 检查重复的核心逻辑
function checkDuplicate(currentEl) {
  const currentVal = currentEl.val().trim();
  if (!currentVal) {
    // 空值无需检查，可在此清除之前的错误提示
    return;
  }
  // 排除当前元素后，该值的出现次数 = 总次数 - 1
  const countWithoutCurrent = (valueCountMap.get(currentVal) || 0) - 1;
  if (countWithoutCurrent > 0) {
    console.log('error: 存在重复值');
    // 这里可添加UI提示，比如给当前元素加红色边框
    currentEl.addClass('duplicate-error');
  } else {
    // 清除错误状态
    currentEl.removeClass('duplicate-error');
  }
}

// 输入变化的处理逻辑（绑定防抖）
const handleInputChange = debounce(function() {
  const $this = $(this);
  const oldVal = $this.data('prevVal');
  const newVal = $this.val().trim();

  // 更新计数：先减去旧值的计数
  if (oldVal) {
    const oldCount = valueCountMap.get(oldVal);
    if (oldCount === 1) {
      valueCountMap.delete(oldVal);
    } else {
      valueCountMap.set(oldVal, oldCount - 1);
    }
  }

  // 更新新值的计数
  if (newVal) {
    valueCountMap.set(newVal, (valueCountMap.get(newVal) || 0) + 1);
  }

  // 保存当前值到data属性
  $this.data('prevVal', newVal);

  // 检查重复
  checkDuplicate($this);
});

// 给所有输入框绑定事件（用input事件覆盖更多输入场景：粘贴、输入法输入等）
$('.request').on('input', handleInputChange);

// 处理动态添加输入框的场景（根据你的实际添加逻辑调整）
function addNewInput() {
  const $newInput = $('<input type="text" class="request">');
  $('#input-container').append($newInput);
  $newInput.data('prevVal', '');
  $newInput.on('input', handleInputChange);
}

三、方案优势 #

1. 性能大幅提升：单次检查从遍历1400个元素变成Map的O(1)查询，防抖进一步减少执行次数；
2. 覆盖全输入场景：用input事件代替keyup，支持鼠标粘贴、输入法联想等非键盘输入的情况；
3. 动态输入框兼容：新增输入框只需绑定事件，无需重新遍历所有元素初始化；
4. 逻辑清晰：通过维护值的计数，避免了重复的DOM遍历和对比。

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