如何从 Javascript 同步运行 Ajax 函数？答案

【问题标题】：How can I run Ajax functions synchronously from Javascript?如何从 Javascript 同步运行 Ajax 函数？
【发布时间】：2011-06-26 05:35:48
【问题描述】：

我有以下代码：

$('#DoButton').click(function (event) {
  event.preventDefault();
  $("input:checked").each(function () {
    var id = $(this).attr("id");
    $("#rdy_msg").text("Starting" + id);
    doAction(id);
  });
});

function doAction(id) {
            var parms = { Id: id };
            $.ajax({
                type: "POST",
                traditional: true,
                url: '/adminTask/doAction',
                async: false,
                data: parms,
                dataType: "json",
                success: function (data) {
                    $("#rdy_msg").text("Completed: " + id);
                },
                error: function () {
                    var cdefg = data;
                }
            });
        }

当单击按钮时，它会检查表单，并且对于每个检查的输入，它都会调用 doAction()，然后调用 Ajax 函数。我想让它在一个调用的完成和下一个调用的运行之间有 2 秒的延迟同步。延迟是为了让用户有时间看到最后一个动作已经完成。

通过设置 async=false 真的会让 ajax 函数等待吗？

如何在 Ajax 运行之后和下一次调用 doAction 之前添加 2 秒等待？

【问题讨论】：

您能否澄清一下，您想等待以便用户知道操作已完成。如果你让你的代码同步，这意味着网页中的任何东西在它运行之前都不会起作用（想想程序在做某事时是如何冻结的）。我建议可能在之后显示一条消息，或者将按钮变灰。微妙的线索是最好的线索。
How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request?的可能重复

标签： javascript jquery

【解决方案1】：

jQuery中有设置ajax函数同步的选项

$.ajaxSetup({
   async: false
});

要让函数等待你可以使用.delay()

也尝试this问题的解决方案。

【讨论】：

【解决方案2】：

尝试使用递归来实现

$('#DoButton').click(function (event) {
  event.preventDefault();
  doAction( $("input:checked").toArray().reverse() );
});

function doAction(arr) {
    if( arr.length == 0 ) return;

    var id = arr.pop().id;
    $("#rdy_msg").text("Starting" + id);
    $.ajax({
        type: "POST",
        traditional: true,
        url: '/adminTask/doAction',
        async: false,
        data: { Id: id },
        dataType: "json",
        success: function (data) {
            $("#rdy_msg").text("Completed: " + id);
            setTimeout(function(){ doAction(arr); }, 2000);
        },
        error: function () {
            var cdefg = data;
            $("#rdy_msg").text("Error: " + id);
            setTimeout(function(){ doAction(arr); }, 2000);
        }
    });
}

【讨论】：

【解决方案3】：

对 AJAX 调用 doAction 使用 setTimeout。

【讨论】：