JavaScript控制台实现setTimeout延迟函数循环问题咨询

问题背景 #

需要从无直接导出功能的CRM系统提取页面列表中的邮箱地址，基础逻辑为：

1. 初始化空数组存储邮箱：

emailsList = [];

2. 单步操作函数（单独测试均运行正常）：

function clickPopup() {
  // 点击用户链接触发Ajax弹窗
  document.querySelector("#tblReport > tbody > tr:nth-child(" + i + ") > td:nth-child(2) > a").click();
}

function getEmailTextAndClose() {
  // 提取弹窗内邮箱
  var email = document.querySelector("#email_compose_link").innerText;
  emailsList.push(email);
  // 关闭弹窗
  parent.parent.$.fn.colorbox.close()
}

由于弹窗通过Ajax加载需要1秒左右等待时间，先后尝试两种循环延迟方案均失效：要么提取函数未按预期延迟执行，要么选择器中i变量未正确递增。

问题根因 #

两种失效方案存在三个核心问题：

• 循环使用var声明i，所有延迟回调共享同一个变量引用，回调实际执行时i已经变为循环终值100，导致选择器匹配不到对应行
• 所有延迟任务几乎在循环瞬间同时注册，没有按「点击→等待弹窗加载→提取关闭→等待弹窗复位→处理下一行」的顺序串行执行，会同时触发上百个弹窗请求，逻辑完全混乱
• 第二版代码存在语法错误：setTimeout(getEmailTextAndClose() 2000)中给函数加了括号会立即执行，根本不会触发延迟，同时setTimeout外部额外调用了一次提取函数，执行时机完全错乱。另外CSS的:nth-child选择器从1开始计数，原循环i从0开始会直接漏过第一行。

可直接运行的实现方案 #

控制台直接粘贴执行即可，基于async/await实现串行逻辑，没有回调嵌套问题：

const emailsList = [];
// 延迟等待工具函数
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function fetchAllEmails(totalRows = 100, popupLoadWait = 1200, closeAnimWait = 300) {
  // 注意：nth-child从1开始计数，循环初始值设为1
  for (let i = 1; i <= totalRows; i++) {
    const rowLink = document.querySelector(`#tblReport > tbody > tr:nth-child(${i}) > td:nth-child(2) > a`);
    if (!rowLink) {
      console.log(`第${i}行未找到用户链接，提前终止提取`);
      break;
    }
    // 点击触发弹窗
    rowLink.click();
    // 等待Ajax内容加载完成
    await wait(popupLoadWait);
    // 提取邮箱
    const emailNode = document.querySelector("#email_compose_link");
    if (emailNode) {
      emailsList.push(emailNode.innerText.trim());
    } else {
      console.log(`第${i}行弹窗未加载出邮箱元素`);
    }
    // 关闭弹窗
    parent.parent.$.fn.colorbox.close();
    // 等待弹窗关闭动画完成，避免影响下一次触发
    await wait(closeAnimWait);
  }
  console.log('提取完成，共获取邮箱', emailsList.length, '个：', emailsList);
  // 自动将换行分隔的邮箱列表复制到剪贴板，直接粘贴即可
  copy(emailsList.join('\n'));
  console.log('邮箱列表已复制到剪贴板');
}

// 执行，参数根据实际页面总行数、加载速度调整即可
fetchAllEmails(100);

使用说明 #

• 如果页面弹窗加载慢，把popupLoadWait参数调大到1500~2000即可
• 实际总行数不是100时，调用fetchAllEmails时传入实际行数即可
• 用let声明循环变量，每次循环会生成独立的块级作用域，不会出现变量值错乱问题
• 每一步操作都等待上一步完全执行完毕才会进入下一轮，不会出现并发触发弹窗的问题

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