一尘不染

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

ajax

嗨,下面的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>");
          }
        });

    });

}

阅读 226

收藏
2020-07-26

共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)));
    })();
}
2020-07-26