循环 jquery ajax 调用时

我想使用 while 循环控制对控制器的 ajax 调用数量。

var counter = 0;
$('#filter-form').submit(function (event) {
    event.preventDefault();

    alert("counter init = " + counter)
    while (counter < 10) {
        (function () {
            $.ajax({
                url: '/algorithm',
                method: 'GET',
                data: $('#filter-form').serialize() + "&counter=" + counter,
                success: function (data) {
                    alert("The data is " + data);
                    setCounter(parseInt(data))
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        })();
    }
    alert("counter end = " + counter)
});

function setCounter(data) {
    counter = data
}

控制器：

@RequestMapping(value = "/algorithm")
@ResponseBody
public String test(@RequestParam Map<String, String> allRequestParam) {

    int counter = Integer.parseInt(allRequestParam.get("counter"));
    counter++;

    return Integer.toString(counter);
}

控制器基本上只是增加计数器并返回它，并且在 ajax 成功时：它将把全局计数器设置为该数字。

当我这样做时，页面就会冻结，我无法单击任何内容。我将 ajax 调用放在一个函数中以进行范围界定，但它仍然不起作用。当我使用 for 循环时，ajax 似乎不会调用，因为我没有收到任何成功或错误警报。

它不起作用的原因很简单：$.ajax调用是异步的。

举个例子：

$(function() {
  var t = 1;
  console.log("Hey, the ajax will start! t's value: " + t);
  $.ajax({
      url: 'www.google.com.br',
      method: 'GET',
      success: function (data) {
          t++;
          console.log("We've received an answer! t's (incremented) value: " + t);
      },
      error: function (xhr, status, error) {
          t++;
          console.log("We've received an error! t's (incremented) value: " + t);
      }
  });
  console.log("Hey, the ajax just ended.... Not really. t's value: " + t);
});

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

输出是：

Hey, the ajax will start! t's value: 1
Hey, the ajax just ended.... Not really. t's value: 1
We've received an error! t's (incremented) value: 2

那是因为$.ajax呼叫是非阻塞，因此在程序完成之前不会阻塞程序，允许程序继续执行下一行代码并继续在后台运行ajax任务。

这是 SO 中经常出现的问题，因此我不会在这里再次提供解决方案，而是请您阅读有关问题的更多信息：

• 如何从异步调用返回响应？ https://stackoverflow.com/q/14220321/3136474
• 如何让 jQuery 执行同步而不是异步 Ajax 请求？ https://stackoverflow.com/q/133310/3136474
• Ajax 中的异步意味着什么？ https://stackoverflow.com/q/3393751/3136474