Question

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

我希望输出为：

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>john@example.com</td>
    </tr>
    <tr>
      <td id="name">July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
    <tr>
      <td id="name">Anja</td>
      <td>Ravendale</td>
      <td>Anja@example.com</td>
    </tr>
  </tbody>
</table>

Answer 1

将名称打印时间更改为100。 setTimeout不是异步函数，因此它不会等待打印John july anja。因此您必须调整settimeout函数的时间。也可以通过ES6 Promise使用睡眠功能。每个setimeout将创建要运行的函数堆栈，这些函数将在时间结束后运行。看看是否有帮助。

 function namePrint(name) {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(name);
        resolve();
      }, 100);
    });
  }

Answer 2

非常感谢您的评论。我必须使用for循环来解决问题，但是如果可以在每个循环中使用jquery，那就太好了。

var trArray = $（“＃myTable tr”）。toArray（）; for（trArray的tr）等待namePrint（tr.cells [“ name”]。textContent）;

异步/等待无法在jQuery each（）中按预期方式工作

2 个答案: