JavaScript中如何让showWebinar函数等待onReadyForServerApproval回调执行

完全可以实现，核心思路是将Pi SDK的onReadyForServerApproval异步回调封装为Promise，再把showWebinar改造为异步函数等待Promise触发后再执行原有逻辑即可，具体步骤如下：

步骤1：声明全局resolver变量 #

用来存储Promise的触发函数，实现回调和异步函数的通信：

// 全局存储Pi SDK回调的resolve触发函数
let onServerApprovalResolve = null;

步骤2：绑定Pi SDK回调 #

在你原有Pi SDK初始化的逻辑中，修改onReadyForServerApproval回调配置：

// 替换为你现有的Pi SDK初始化逻辑
Pi.init({
  // 你原本的其他Pi SDK配置项
  callbacks: {
    onReadyForServerApproval: (paymentId) => {
      // 此处保留你原本需要在该回调中执行的所有逻辑
      // ...
      
      // 回调触发后，调用resolve通知等待的异步函数继续执行
      if (onServerApprovalResolve) {
        onServerApprovalResolve(paymentId);
        onServerApprovalResolve = null; // 执行完重置，避免重复触发
      }
    }
    // 其他你需要配置的Pi SDK回调
  }
})

步骤3：改造showWebinar函数 #

将函数改为异步函数，先等待回调触发再执行原有逻辑：

const showWebinar = async (id) => {
  // 等待onReadyForServerApproval回调触发
  await new Promise((resolve) => {
    onServerApprovalResolve = resolve;
  });

  // 原有逻辑保持不变
  const yt_frame = document.getElementById("youtube_frame");
  yt_frame.setAttribute("src", `https://www.youtube.com/embed/${id}`);
  yt_frame.style.display = "unset";
  dataLayer.push({'event': `${id}`});
}

可选：添加超时异常处理 #

可以增加超时逻辑，避免支付流程异常时函数一直等待：

const showWebinar = async (id) => {
  try {
    // 设置30秒超时，超时直接抛出异常
    await new Promise((resolve, reject) => {
      onServerApprovalResolve = resolve;
      setTimeout(() => {
        reject(new Error('支付等待超时'));
        onServerApprovalResolve = null;
      }, 30000);
    });

    // 原有逻辑
    const yt_frame = document.getElementById("youtube_frame");
    yt_frame.setAttribute("src", `https://www.youtube.com/embed/${id}`);
    yt_frame.style.display = "unset";
    dataLayer.push({'event': `${id}`});
  } catch (err) {
    // 此处添加你的错误处理逻辑，例如给用户弹出错误提示
    console.error('流程执行出错：', err);
  }
}

注意事项 #

• 确保Pi SDK初始化完成后再允许用户点击按钮，避免回调未绑定导致逻辑失效
• 若允许多次点击按钮，建议点击后先禁用按钮，等流程执行完成后再解禁，避免重复创建Promise导致逻辑冲突
• 如果需要将回调返回的参数传递到showWebinar中，直接在resolve()中传入参数，在await语句后接收即可

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