在 .each() 循环中使用 ajax答案

【问题标题】：Using ajax in .each() loop在 .each() 循环中使用 ajax
【发布时间】：2016-01-16 18:02:34
【问题描述】：

我正在尝试在 tr 循环中使用 ajax。

这是我的代码：

var i=0;
$("tr").each(function() {
var row = datastring;
console.log("I = " + i);
$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});
i++;
});

预期结果

所以我希望按 console.log 必须按以下顺序返回日志的顺序触发事件：

我 = 0
成功或错误
我 = 1
成功或错误

实际结果

但在我运行代码后，console.log 按以下顺序返回日志

我 = 0
我 = 1
成功或错误
成功或错误

所以这意味着我的 ajax 函数在我的每个循环完成后被调用。但我不希望函数循环，除非 ajax 请求竞争。

如果您需要更多解释，请告诉我。

谢谢。

【问题讨论】：

Ajax 是异步的，在 async:false 模式下运行会导致不好的用户体验（浏览器会锁定直到你的循环完成，看起来你的页面已经损坏了）
Ajax 是异步的......嘿，打败我！ +1

标签： jquery each

【解决方案1】：

正如多次提到的，Ajax 是异步的。这意味着其他功能和代码可以同时运行，这样做的好处是浏览器不必等待请求完成就可以继续页面 JS 执行。想象一下，如果您在一个页面上有十几个 Ajax 请求，而一台服务器需要 30 秒来响应，那会是什么样子……

但是，如果您仍想同步运行请求，可以将async 标志设置为false：

var i = 0;
$("tr").each(function() {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
    i++;
});

附：不需要手动递增i，jQuery的.each()可以提供：

$("tr").each(function(i) {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
});

【讨论】：

【解决方案2】：

您必须将 async 设置为 false。

$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    async: false,
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});

但这并不是最好的做法，因为它可能会锁定浏览器，而 AJAX 的全部意义在于异步。

【讨论】：

【解决方案3】：

使用async=false。

这里引用 jQuery 文档：

asyncBoolean 默认值：true 默认情况下，发送所有请求异步（即默认设置为 true）。如果你需要同步请求，将此选项设置为 false。跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。从 jQuery 1.8 开始，不推荐使用 async: false 和 jqXHR ($.Deferred)；你必须使用complete/success/err

或回调。

【讨论】：