请问如何优化这个存在异步逻辑的滚动事件监听函数？

Question

async _handleBrandListScroll() {
  const { ids, mainScrollerOffset } = this.data;
  let indexs: number[] = [];

  for (const id of ids) {
    const [[{ top: rectTop }]] = await queryBoundingClient(this, id);
    if (typeof rectTop !== 'number') continue;
    if (rectTop <= mainScrollerOffset) {
      const idIndexs = getIdIndexs(id);
      if (!_.isUndefined(idIndexs)) {
        indexs = idIndexs;
      }
    } else {
      break;
    }
  }

  const [mainIndex, subIndex] = indexs;
  if (this.data.currentLeftTabIndex !== mainIndex) {
    this.setData({ currentLeftTabIndex: mainIndex });
    this.updateCurrentTopTabList(mainIndex);
  }
  if (this.data.currentTopTabIndex !== subIndex) {
    this.setData({ currentTopTabIndex: subIndex });
    this.updateTopTabsScrollLeft(subIndex);
  }
},

主要问题是 queryBoundingClient 是异步返回结果的（在微信小程序环境中），导致 _handleBrandListScroll 的 throttle 无效，结果 indexs 不准。体现在视图上就是，滑动过快时当前选中的 tab 来回横跳。

Answer 1

async _handleBrandListScroll() {
  const { ids, mainScrollerOffset } = this.data;
  let indexs: number[] = [];

  // Step 1: 批量处理异步请求
  const rectTops = await Promise.all(ids.map(id => queryBoundingClient(this, id)));
  
  for (let i = 0; i < rectTops.length; i++) {
    const [[{ top: rectTop }]] = rectTops[i];
    if (typeof rectTop !== 'number') continue;
    if (rectTop <= mainScrollerOffset) {
      const idIndexs = getIdIndexs(ids[i]);
      if (!_.isUndefined(idIndexs)) {
        indexs = idIndexs;
      }
    } else {
      break;
    }
  }

  const [mainIndex, subIndex] = indexs;
  if (this.data.currentLeftTabIndex !== mainIndex) {
    this.setData({ currentLeftTabIndex: mainIndex });
    this.updateCurrentTopTabList(mainIndex);
  }
  if (this.data.currentTopTabIndex !== subIndex) {
    this.setData({ currentTopTabIndex: subIndex });
    this.updateTopTabsScrollLeft(subIndex);
  }
},