php - 当异步为真时，jQuery如何发出ajax请求 "synchronous"

Question

var tds = ["0", "1", "2", "3", "4", "5", "6"];

for (var i = 0; i < tds.length; i++) {

    jQuery("#notification-bar").html('I am doing ' + tds[i]);

    jQuery.ajax({
        url: "/ajax_json_echo/",
        type: "POST",
        timeout: 10000,
        data: tds[i],
        success: function(response) {
       
        },
        error: function(x, t, m) {
        
 
        }
    });


} //end for

jQuery("#notification-bar").html("Done!");​

/ajax_json_echo/可能需要 10 秒甚至更长时间来处理 tds。

通知栏的预期结果是

I am doing 0

I am doing 1

I am doing 2

...

Done!

我得到的实际结果是:

Done!

我猜这是由于jquery ajax的async变量被设置为true引起的。

如果设置为 false，浏览器将被卡住。当它恢复时，我得到“完成!”仅。

Answer 1

浏览器运行 JavaScript 并在同一线程上进行页面渲染，因此当 JS 运行时不会发生重绘。这意味着整个 for 循环将完成，并且状态消息将设置为“完成!” 在页面更新之前。

在 async 为 true 的情况下，所有 Ajax 请求最初都会排队，并且消息设置为“完成!”然后稍后异步处理响应。在 async 设置为 false 的情况下，Ajax 请求一次完成一个，在响应到来之前不会采取进一步的操作。无论哪种方式，浏览器都没有机会显示“我正在做...”消息。

您可以从 Ajax 完成(或成功)回调中触发每个后续调用，而不是使用循环:

var tds = ["0", "1", "2", "3", "4", "5", "6"];

function doNextAjax(i) {
   if (i < tds.length) {
      jQuery("#notification-bar").html('I am doing ' + tds[i]);

      jQuery.ajax({
         url: "/ajax_json_echo/",
         type: "POST",
         timeout: 10000,
         data: tds[i],
         success: function(response) {

         },
         error: function(x, t, m) {    

         },
         complete: function() {
            doNextAjax(i + 1);
         }
      });
   } else {
      jQuery("#notification-bar").html("Done!");​
   }
}

doNextAjax(0);

每次调用 doNextAjax() 时，它都会更新状态消息并发出单个 Ajax 请求，仅此而已。当函数退出时，浏览器就有机会重新渲染并实际显示该消息。然后，当完整回调被触发时，它会再次调用该函数来处理下一个项目。当没有剩余项目时，它会设置“完成!”消息。

请注意，使用完整回调来触发下一个 Ajax 调用意味着即使特定请求失败，它也会继续执行。如果您想在错误时停止，您可以删除完整的处理程序并将 doNextAjax(i+1) 移至成功回调中。