javascript - 在第一个元素的处理结束之前，不要处理 forEach 循环中的下一个元素

Question

我正在 forEach 循环内运行 post 调用。我如何确保它不会转到列表中的下一个元素，直到第一个元素的过程完成为止？

这是我的数组:arr = ['Hermione', 'Ron', 'Harry']

这是我的循环:

arr.forEach(d=>{
   $('#the_table>tbody').append(` 
      <tr id='tr_${d}'>
         <td'>${d}</td>
         <td><i id='change' class='no'></i></td>
      </tr>
   `);
});

const myfunc = () => {
$.post(api, json_object,
   function(data, status) {
      if (data.value === 'started') {
      setTimeout(myfunc, 5000);
   } else {
      $('#change').removeClass('no').addClass('yes');
   }
}, 'json');
            }
myfunc();

我想从第一个元素 Hermione 开始。直到状态从 started 更改为 done 为止，我不想在第二个元素 Ron 上启动该过程，依此类推。

我该怎么做？

Answer 1

你不需要递归函数；你需要使用 Promise api (async/await)，和他们的伙伴 .then() .when() .next() 等你面临的基本问题是你需要按一定的顺序返回结果，而ajax是异步的(事情发生时发生，不一定按顺序) - 但你需要它们按一定的顺序.

一开始是XMLHttpRequest (XHR) ，并且(第一次!)它允许客户端 JavaScript 与后端服务器通信，并接收包含新数据的响应，这些新数据可以被解析并添加到 DOM，而无需离开或刷新页。这既棘手又困难，很少有人使用它 - 但它确实有效。

.then() 随之而来的是 John Resig，他发明了 jQuery，并在其中包含了 $.ajax() 结构及其快捷方式 $.get() $.post() 和 $.load() - XHR 明显更容易。世界欢欣鼓舞!但因为它是异步的，所以当您需要进行多个相关的 ajax 调用时，以正确的顺序从函数中获取值仍然有点棘手。

.then() 随之而来的是 Promise api - 因为还有什么比让代码做出 Promise 并等待它被实现更容易的呢？天下再一次欢欣鼓舞，不再有掠夺。您只需设置一个 Promise 和 .then() 您就可以使用 .after() 和 .next() 和 .when ()，当然，还有 .then()，它是真正可读的代码，读起来和写起来一样容易。

没有什么比这更容易的了!直到 2017 年，async 和 await 被添加到 ECMAScript 中。现在您所要做的就是在函数作用域的顶部添加关键字 async ，然后在其中您可以使用 await 关键字为您编写这些 Promise。因为 async/await 实际上只是 Promises api 的包装器，所以您仍然可以使用 .then() .when() .next() 等 - 但您的代码更具可读性且更易于编写!

世界欢欣鼓舞，但仍然没有发生抢劫。

WttW*:这个(async/await 和 Promises api)是您绝对必须了解的东西 - 它每天都会对您更有用。

^{*智者之言}

引用文献:

https://blog.bitsrc.io/understanding-javascript-async-and-await-with-examples-a010b03926ea

https://petetasker.com/using-async-await-jquerys-ajax/