异步等待元素加载并通过jQuery获取值的实现方案求助——异步函数返回值问题

我明白你的困惑——异步代码确实一开始不太好理解，尤其是当你习惯了普通函数立即返回结果的时候。咱们先拆解一下你当前代码的问题，再给出能正确拿到结果的方案。

为什么你的代码会返回undefined？ #

你的getTeam函数里用了setInterval，这是一个异步操作：函数本身会立刻执行完毕并返回（默认返回undefined），而setInterval的回调函数是每隔100毫秒才会跑一次。你在回调里写的return firstTeam.trim()，其实是返回给setInterval的回调函数本身，而不是返回给getTeam的调用者——这就是为什么直接console.log(getTeam())会先输出undefined，而回调里的console.log能拿到正确值。

用Promise改造你的函数 #

要让异步操作能返回结果，我们可以用Promise——它就像一个“承诺”：现在先给你一个容器，等异步操作完成后，再把结果放进这个容器里。改造后的代码如下：

function getTeam() {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    const sir = setInterval(() => {
      const teamsGrid = $('[class*="teamsgrid"]').find("p");
      const firstTeam = $(teamsGrid[0]).text();
      if (firstTeam !== '') {
        clearInterval(sir);
        // 当拿到结果时，用resolve把结果传递出去
        resolve(firstTeam.trim());
      }
    }, 100);

    // 可选：添加超时逻辑，防止无限轮询
    setTimeout(() => {
      clearInterval(sir);
      reject(new Error('超时：未找到目标元素'));
    }, 10000); // 10秒后超时
  });
}

如何正确获取结果？ #

Promise的结果需要用async/await或者.then()的方式来获取，两种方式都可以，选你觉得好理解的就行：

方式1：用async/await（更直观，像同步代码） #

注意await必须放在async函数里面：

// 定义一个async函数来调用getTeam
async function getAndLogTeam() {
  try {
    // 等待Promise完成，拿到结果
    const teamName = await getTeam();
    console.log(teamName);
    // 这里可以继续用teamName做其他操作
  } catch (error) {
    // 如果超时或者出错，在这里处理
    console.error(error.message);
  }
}

// 调用这个async函数
getAndLogTeam();

方式2：用.then()和.catch()（传统Promise写法） #

getTeam()
  .then(teamName => {
    // Promise成功时执行这里，拿到结果
    console.log(teamName);
  })
  .catch(error => {
    // Promise失败（比如超时）时执行这里
    console.error(error.message);
  });

为什么这样能行？ #

• Promise会把异步操作的结果“保存”起来，直到你用await或者.then()去取它。
• resolve()相当于告诉Promise“我完成了，结果是这个”，reject()则是“我失败了，原因是这个”。
• 加超时逻辑是为了避免如果页面一直没加载出目标元素，代码就无限轮询下去，更健壮。

这样修改后，你就能正确等待元素加载完成，拿到它的内容啦。

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