jQuery Ajax / .each回调，在ajax完成之前下一个'each'触发

Question

嗨，下面的Javascript是在我提交表单时调用的。它首先从文本区域分割一堆网址，然后：

1）在表格中为每个网址添加行，并在最后一列（“状态”列）中显示“未开始”。
2）再次循环遍历每个URL，首先它进行ajax调用以检查状态（status.php），该状态将返回0到100之间的百分比
。3）在同一循环中，它通过ajax启动实际过程（process.php），当进程完成时（请记住连续的状态更新），它将在状态栏中说“已完成”并退出auto_refresh。
4）然后应转到下一个“每个”并对下一个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>");
          }
        });

    });

}

Answer 1

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

https://github.com/michiel/asynchelper-
js/blob/master/lib/sequencer.js

var actions = [];
$.each(lines, function(key, value) {

    actions.push(function(callback) {
      $.ajax({
          url: 'process.php?id='+val,
          success: function(msg) {
            clearInterval(auto_refresh);

            //
            // Perform your DOM operations here and be sure to call the
            // callback!
            //

            callback();
          }
        });
    });
  }
);

如您所见，我们构建了一个范围函数的数组，这些函数将一个任意回调作为参数。音序器将为您运行它们。

使用github链接中的序列帮助器并运行，

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

顺便说一句，可以在几行代码中定义定序器功能。例如，

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