Javascript jQuery Ajax/。每个回调，下一个'；每个'；在ajax完成之前触发

嗨，当我提交表单时，下面的Javascript被调用。它首先从文本区域拆分一组url，然后：

1） 为每个url向表中添加行，并在最后一列（“状态”列）中显示“未启动”。
2） 它再次循环遍历每个url，首先进行ajax调用以检查状态（status.php），该状态将返回0-100之间的百分比。
3） 在同一循环中，它通过ajax（process.php）启动实际流程，当流程完成时（记住持续的状态更新），它将在状态列中显示“已完成”，并退出自动刷新。
4） 然后它应该转到下一个“each”，并对下一个url执行相同的操作

function formSubmit(){

    var lines = $('#urls').val().split('\n');

    $.each(lines, function(key, value) {
        $('#dlTable tr:last').after('<tr><td>'+value+'</td><td>Not Started</td></tr>');
    });

    $.each(lines, function(key, value) {

        var auto_refresh = setInterval( function () {
            $.ajax({
              url: 'status.php',
              success: function(data) {
            $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>"+data+"</td>");
              }
            });
        }, 1000);

        $.ajax({
          url: 'process.php?id='+value,
          success: function(msg) {
        clearInterval(auto_refresh);
        $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>completed rip</td>");
          }
        });

    });

}

函数formSubmit（）{
var lines=$（'#url'）.val（）.split（'\n'）；
$。每个（行、函数（键、值）{
$（'#dlTable tr:last'）。在（''+value+'Not start'）之后；
});
$。每个（行、函数（键、值）{
var auto_refresh=setInterval（函数（）{
$.ajax({
url:'status.php'，
成功：功能（数据）{
$（'#dlTable'）.find（“tr”）.eq（键+1）.children（）.last（）.replacetwith（“+data+”）；
}
});
}, 1000);
$.ajax({
url:'process.php？id='+值，
成功：功能（msg）{
clearInterval（自动刷新）；
$（'#dlTable'）.find（“tr”）.eq（key+1）.children（）.last（）.replacetwith（“completed rip”）；
}
});
});
}

AJAX是异步的

这正是应该发生的事情

---

您应该在前一个AJAX请求的完成处理程序中发送下一个AJAX请求，而不是使用每个AJAX请求。

我会给出与此相同的答案

这段代码将让您了解如何将回调与循环和ajax结合使用。但我还没有测试它，会有bug。我从旧代码中派生了以下内容：-

var processCnt; //Global variable - check if this is needed
function formSubmit(){

    var lines = $('#urls').val().split('\n');

    $.each(lines, function(key, value) {
        $('#dlTable tr:last').after('<tr><td>'+value+'</td><td>Not Started</td></tr>');
    });

    completeProcessing(lines ,function(success)
    {
           $.ajax({
          url: 'process.php?id='+value,
          success: function(msg) {
                $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>completed rip</td>");
          }
        });


    });


}

//Following two functions added by me
function completeProcessing(lines,callback)
{
    processCnt= 0;
    processingTimer = setInterval(function() { singleProcessing(lines[processCnt],function(completeProcessingSuccess){ if(completeProcessingSuccess){ clearInterval(processingTimer); callback(true); }})}, 1000);    

}


function singleProcessing(line,callback)
 {
    key=processCnt;
    val = line;
    if(processCnt < totalFiles)
    { //Files to be processed

        $.ajax({
                  url: 'status.php',
                    success: function(data) {
                           $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>"+data+"</td>");
                      processCnt++; 
                      callback(false); 

                    }
                });
    }
    else
    {
        callback(true);

    }       
}

var-processCnt//全局变量-检查是否需要
函数formSubmit（）{
var lines=$（'#url'）.val（）.split（'\n'）；
$。每个（行、函数（键、值）{
$（'#dlTable tr:last'）。在（''+value+'Not start'）之后；
});
完成处理（行、函数）（成功）
{
$.ajax({
url:'process.php？id='+值，
成功：功能（msg）{
$（'#dlTable'）.find（“tr”）.eq（key+1）.children（）.last（）.replacetwith（“completed rip”）；
}
});
});
}
//下面是我添加的两个函数
函数完成处理（行、回调）
{
processCnt=0；
processingTimer=setInterval（函数（）{singleProcessing（行[processCnt]，函数（completeProcessingSuccess）{if（completeProcessingSuccess）{clearInterval（processingTimer）；回调（true）；}}}}}，1000）；
}
函数单处理（行、回调）
{
key=processCnt；
val=直线；
if（processCnt

您还可以使用“async”属性将AJAX设置为同步运行。添加以下内容：

$.ajax({ "async": false, ... other options ... });

AJAX API参考。请注意，这将锁定浏览器，直到请求完成

---

我更喜欢SLaks答案中的方法（坚持异步行为）。但是，这取决于您的应用程序。小心点。

您想要的是按顺序运行几个异步操作，对吗？我将构建一个函数数组来执行它，并通过序列助手运行它

如您所见，我们构建了一个作用域函数数组，该数组将任意回调作为参数。定序器将为您按顺序运行它们

使用github链接中的sequence helper并运行

var sequencer = new Sequencer(actions);
sequencer.start();

顺便说一句，可以在几行代码中定义sequencer函数。比如说,

function sequencer(arr) {
    (function() {
        ((arr.length != 0) && (arr.shift()(arguments.callee)));
    })();
}

---

不要这样做。它将完全冻结浏览器，直到服务器答复。由于该选项可用，因此添加了完整的答案。坚持异步调用更好。完美，正是我想要的。非常感谢。

function sequencer(arr) {
    (function() {
        ((arr.length != 0) && (arr.shift()(arguments.callee)));
    })();
}