如何在Wix的for循环代码块中插入Promise实现分阶段执行

原代码的问题在于每次循环都立即排序并更新UI，而且仅存储指数值无法关联到对应食物，导致最终UI显示混乱。以下是符合需求的修复版本，通过async/await（Promise语法糖）确保所有指数计算与过滤完成后，再执行排序和排名逻辑：

async function calculate() {
  // 存储包含食物信息和对应指数的对象，而非仅存指数
  const foodIndexArray = [];
  
  try {
    // 用await等待数据库查询完成
    const res = await wixData.query('Food').find();
    
    // 第一组：完成所有指数计算与NaN过滤
    for (const item of res.items) {
      const nutrientOfAmount = item[nutrientId];
      const grams = Number(item.grams);
      const price = Number(item.price);
      const index = (nutrientOfAmount * grams) / price;
      
      // 过滤NaN值，仅保留有效计算结果
      if (!Number.isNaN(index)) {
        foodIndexArray.push({ item, index });
      }
    }
    
    // 第二组：所有计算完成后再排序
    foodIndexArray.sort((a, b) => b.index - a.index); // 直接降序排序，省去reverse
    
    // 更新UI：匹配前三名的食物与指数
    if (foodIndexArray.length >= 1) {
      $w('#text1').text = foodIndexArray[0].item.food;
      $w('#text2').text = `${foodIndexArray[0].index}`;
    }
    if (foodIndexArray.length >= 2) {
      $w('#text3').text = foodIndexArray[1].item.food;
      $w('#text4').text = `${foodIndexArray[1].index}`;
    }
    if (foodIndexArray.length >= 3) {
      $w('#text5').text = foodIndexArray[2].item.food;
      $w('#text6').text = `${foodIndexArray[2].index}`;
    }
  } catch (error) {
    console.error('数据查询或计算出错:', error);
  }
}

$w('#button').onClick(() => calculate());

关键改进说明 #

1. 用async/await控制流程：确保数据库查询完成后才开始计算，且所有计算逻辑执行完毕后再进行排序和UI更新，完全满足“第二组代码仅在第一组执行完成后运行”的要求。
2. 存储完整关联信息：将食物对象与对应指数绑定存储，解决了原代码中仅存指数无法对应食物的问题，确保排名能正确关联到具体食物名称。
3. 优化排序逻辑：直接使用b.index - a.index实现降序排序，省去reverse()步骤，提升效率。
4. 增加错误处理：用try/catch捕获数据库查询或计算中的异常，避免程序崩溃。

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