jquery - 在 .each() 循环中使用 ajax

Question

我正在尝试在 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 必须按以下顺序返回日志的顺序触发事件：

1. 我 = 0
2. 成功或错误
3. 我 = 1
4. 成功或错误

实际结果

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

1. 我 = 0
2. 我 = 1
3. 成功或错误
4. 成功或错误

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

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

谢谢。

Answer 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++;
});​

PS 你不需要手动递增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")
        }
    });
});​

Answer 2

你必须设置async为假。

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

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

Answer 3

使用async=false.

这是 jQuery 文档的引用：

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

或回调。