javascript - async/await 在 jQueryeach() 中未按预期工作

Question

我的 async/await 示例代码无法正常工作。 我正在使用 jquery .each 循环以及异步/等待功能，但未按预期工作

我希望输出是:

one
John
July
Anja
two
done

但是实际输出是:

one
two
done
John
July
Anja

$(document).ready(function() {
  function one() {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("one");
        resolve();
      }, 500);
    });
  }

  function two() {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("two");
        resolve();
      }, 300);
    });
  }

  function namePrint(name) {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(name);
        resolve();
      }, 400);
    });
  }
  async function msg() {
    try {
      await one();
      $("#myTable tr").each(async function(index, item) {
        await namePrint($(this).find("#name").text());
      });
      await two();
      console.log("done");
    } catch (e) {
      console.log("Error:", e);
    }
  }
  msg();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td id="name">John</td>
      <td>Doe</td>
      <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13797c7b7d53766b727e637f763d707c7e" rel="noreferrer noopener nofollow">[email protected]</a></td>
    </tr>
    <tr>
      <td id="name">July</td>
      <td>Dooley</td>
      <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e389968f9aa3869b828e938f86cd808c8e" rel="noreferrer noopener nofollow">[email protected]</a></td>
    </tr>
    <tr>
      <td id="name">Anja</td>
      <td>Ravendale</td>
      <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7a6898d86a7829f868a978b82c984888a" rel="noreferrer noopener nofollow">[email protected]</a></td>
    </tr>
  </tbody>
</table>

Answer 1

非常感谢您的评论。 我不得不使用for循环来解决这个问题，但是如果每个循环都可以使用jquery就太好了。

var trArray=$("#myTable tr").toArray();
for(tr of trArray) await namePrint(tr.cells["name"].textContent);