jQuery如何在异步为真时使ajax请求“同步”

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。

通知栏的预期结果是

我在做0 我在做1 我在做2 ..。 完成了！

我得到的实际结果是：

完成了！

我猜这是由jquery的异步变量设置为true造成的。

如果设置为false，浏览器将被冻结。当它恢复的时候，我就“完成了！”只有这样。

Answer 1

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

在异步为真的情况下，所有Ajax请求最初都会排队，消息设置为“完成！”然后，稍后异步地处理响应。在异步设置为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)移动到成功回调中。

Answer 2

通常，这就是在AJAX请求完成时使用ajax()的成功回调参数来运行函数的方法。

http://api.jquery.com/jQuery.ajax/

Answer 3

如果您可以使用HTML5元素，那么使用<progress>元素，这就是他存在的原因。

在每个ajax请求的成功回调中增加进度条值。

var progress = document.getElementById('progress');
progress.max = tds.length;  

...
success: function(){
                       progress.value++;
                   }

现场演示