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

Question

您好，当我提交表单时，会调用下面的 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>");
          }
        });

    });

}

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)));
    })();
}

Answer 2

AJAX 是异步。

这正是应该发生的事情。

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

Answer 3

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

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

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

我更喜欢 SLAks 答案中的方法（坚持异步行为）。但是，这确实取决于您的应用程序。谨慎行事。

Answer 4

我会给出与此相同的答案 jquery json populate table

此代码将给出您知道如何将回调与循环和 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);

    }       
}