如何在for循环中dispatch keyup事件并等待DOM搜索结果存入数组

问题根源 #

你的循环是同步执行的，但输入框keyup触发的搜索逻辑（比如防抖请求、DOM更新）基本都是异步的。循环会在瞬间跑完所有赋值和事件触发操作，前面几次的异步搜索还没来得及完成，最后一次的输入值就覆盖了前面的，导致所有异步操作最终都基于最后一个Name执行，自然只能拿到最后一项的结果。另外，你直接dispatch的keyup事件可能缺少必要参数（比如冒泡属性），导致没有被目标监听逻辑捕获。

解决方案 #

方案一：用Async/Await等待搜索结果更新

把函数改成异步函数，每次循环等待搜索完成后再进入下一步。可以用MutationObserver监听目标元素的DOM变化，确认搜索结果更新后再继续：

async function makeSomeAction() {
  const arrayOfElementsNameToClick = []; 

  for (const Name of arrayOfNames) {
    // 填充输入框并触发带冒泡的keyup事件
    myElementInput.value = Name;
    myElementInput.dispatchEvent(new Event('keyup', { bubbles: true, cancelable: true }));

    // 等待#blabla元素的内容更新
    await new Promise(resolve => {
      const observer = new MutationObserver(() => {
        observer.disconnect();
        resolve();
      });
      // 监听目标元素的子节点变化（根据实际搜索结果的更新方式调整）
      observer.observe(document.querySelector("#blabla"), { childList: true, subtree: true });
    });

    // 克隆节点存入数组，避免后续更新覆盖引用
    const result = document.querySelector("#blabla").cloneNode(true);
    arrayOfElementsNameToClick.push(result);
  }
  
  return arrayOfElementsNameToClick; 
}

方案二：直接调用搜索逻辑（若可控）

如果输入框的搜索逻辑是你自己实现的，直接调用对应的搜索函数并等待其完成，比触发DOM事件更可靠：

async function makeSomeAction() {
  const arrayOfElementsNameToClick = []; 

  for (const Name of arrayOfNames) {
    myElementInput.value = Name;
    // 直接调用搜索函数，等待异步操作完成
    await handleSearch(Name);
    
    const result = document.querySelector("#blabla").cloneNode(true);
    arrayOfElementsNameToClick.push(result);
  }
  
  return arrayOfElementsNameToClick; 
}

注意事项 #

• 如果#blabla是每次搜索都会被替换的元素，一定要用cloneNode(true)克隆节点再存入数组，否则数组里的元素会被后续搜索结果覆盖。
• 确认触发的事件类型是否正确：有些场景下input事件比keyup更贴合输入更新的逻辑，或者需要触发change事件。
• 如果搜索逻辑有防抖（比如用setTimeout延迟执行），要确保等待时间足够，或者修改防抖逻辑支持手动触发完成。

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