javascript - Javascript 中同步函数内的异步函数

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 5 年前。

在通过代码加载一些 HTML 时，我想从服务器获取一些数据。因此，我从同步函数开始，并在其中调用 POST。

我创建了一个示例

$(document).ready(function() {

  for (var i = 1; i < 6; i++) {
    var div = $("<div></div>");

    var price = 0;
    
    /* get the price from the server by passing the object id

    $.ajax({
      type: 'POST',
      url: '/getPrice',
      contentType: 'application/json',
      data: JSON.stringify({
        id: i
      })
    }).done(function(response) {
      price = response.price;
    });
    
    */

    div.html("id " + i + " price " + price);

    $("#container").append(div);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

运行代码时，价格始终为 0 。我知道 AJAX 调用是异步的，但如何修复代码？

Answer 1

将代码放入done中，就像

$.ajax({
  type: 'POST',
  url: '/getPrice',
  contentType: 'application/json',
  data: JSON.stringify({
    id: i
  })
}).done(function(response) {
  price = response.price;
  div.html("id " + i + " price " + price);
  $("#container").append(div);
});