如何等待foreach循环JavaScript中执行异步调用？

我有如下表格

<table id="mytbl">
  <tr><td><button class="payoutBtn" onclick="payToSingle(1,2,5);">Pay</button></td></tr>
  <tr><td><button class="payoutBtn" onclick="payToSingle(5,8,5);">Pay</button></td></tr>
  <tr><td><button class="payoutBtn" onclick="payToSingle(7,2,5);">Pay</button></td></tr>
  <tr><td><button class="payoutToAllBtn" onclick="payToMultiple();">Pay To All</button></td></tr>
</table>

每次单击payToSingle（）函数都可以正常工作，但当我单击“全部付款”时，只有第一次付款成功，而不是全部成功

async function payToSingle(param1,param2,paramN){
    console.log("payToSingle() called..!");
    //multile async calls goes here
    await server.loadAccount(param1)
    await makePayment1(param1,param2);
    await makePayment2(param3);
    return;
}

更新：

Hi引用了建议的重复问题，并在下面进行了更改，现在代码正在运行

HTML:

<table id="mytbl">
      <tr>
        <td class="param1">1</td>
        <td class="param2">2</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>
      <tr>
        <td class="param1">5</td>
        <td class="param2">8</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>
      <tr>
        <td class="param1">7</td>
        <td class="param2">2</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>     
      <tr><td><button class="payoutToAllBtn" onclick="payToMultiple();">Pay To All</button></td></tr>
    </table>

---

如果需要等待所有异步函数返回，可能需要将其包装为Promise。所有：

  await Promise.all($active_rows.map(/* your async functions go there */))

---

但是请注意，只有当数组中的所有承诺都解决时，它才会解决。您应该使用承诺，而不是您的代码正在等待一个点击触发器，而点击触发器本身不是承诺。异步函数只能等待承诺。您需要重新构造代码，可能需要附加一个单击事件侦听器并分配一个回调，然后等待它，以便等待承诺。另外，您不需要嵌套的

async

声明。是的，可能是这样，但表行是动态生成的。这不是等待吗？您是这样做的吗await Promise.all（$active_rows.map（async function（）{var targetElement=$（this）.find（'.payoutBtn'）；await targetElement.trigger（“click”）；}）```是的做sameYanis谢谢你的帮助

async function payToMultiple(){
        var targetElements = [];
        var selected_rows = $('#mytbl tbody tr').length;    
        if(selected_rows > 0){
            var $active_rows = $("#mytbl").children('tr')                           
            $active_rows.each(async function() {
                var targetElement = $(this).find('.payoutBtn');
                targetElements.push(targetElement);                 
            });                 
        } 

        for(var i=0;i<targetElements.length;i++){
            const result =  await payToSingle(targetElements[i]);
        }
    }

async function payToSingle(element){
        console.log("payToSingle() called..!");
        var currentrow = $(element).parent().parent();
        var param1 = $(currentrow).find(".param1").text();
        var param2 = $(currentrow).find(".param2").text();
        var param3 = $(currentrow).find(".param3").text();
        //multile async calls goes here
        await server.loadAccount(param1)
        await makePayment1(param1,param2);
        await makePayment2(param3);
        return;
    }

  await Promise.all($active_rows.map(/* your async functions go there */))