javascript - 使用 AJAX 在 PHP 服务器上执行一组顺序任务

Question

我对 AJAX 固有的异步性与我想要完成的任务有疑问...

使用文件上传表单，我尝试将一组数据发送到 LAMP 服务器，然后循环遍历数据的每个子集并为每个子集生成 PDF。处理所有 PDF 需要 2 分钟左右的时间，因为每个数据子集都会生成很多 PDF(例如 100 个)。

我希望使用 JavaScript/jQuery 将数据分段为子集，每次将一个子集发布到服务器，并且在生成每个 PDF 时，从服务器获取响应并增加进度条，然后发送下一个请求。

你将如何在循环中完成这个任务？下面的内容不起作用，因为 jQuery 不关心服务器的状态并异步发送所有请求。

var i = 0;
$.each(data_stuff, function(key, value) {
    $.post( window.location.href, { 
        stuff: key,
        data: value
    }).done(function( data ) {
        if (data == 1) {
            $('div#counter').text(i);
        }
    });                         
    $i++;
});

谢谢!

Answer 1

假设 data_stuff 是一个对象，您可以尝试以下操作:

var i = 0;

// We need an array (not object) to loop trough all the posts. 
// This saves all keys that are in the object:
var keys = Object.keys(data_stuff);

function postNext() {

    // For every POST request, we want to get the key and the value:
    var key = keys[i];
    var value = data_stuff[key];

    $.post( window.location.href, { 
        stuff: key,
        data: value
    }).done(function( data ) {
        if (data == 1) {
            $('div#counter').text(i);
        }

        // Increment i for the next post
        i++;

        // If it's the last post, run postsDone
        if(i == keys.length) {
            postsDone();
        }
        // Else, run the function again:
        else {
            postNext();
        }
    });
});

postNext();

function postsDone() {
    // All data was posted
}

这只会在上一个 $.post 完成后发布下一个 data_stuff 位。