javascript - jQuery AJAX 递归

Question

背景

我制作了一个 PHP 脚本，通过 POST 循环用户 ID 向许多用户发送电子邮件。当我尝试对大量用户 (1000+) 使用该脚本时，脚本超时。

为了解决这个问题，我决定在前端使用 AJAX 来单独发送每个请求。我已经设置了一个简单的示例页面来测试我的代码。 PHP 脚本延迟五秒。我希望每五秒收到一个请求。但是，我延迟了五秒，然后立即收到所有响应。经过更多研究，我发现我的 AJAX 调用是链接的，这不是我想要的。相反，我只想在最后一个 AJAX 调用完成时发送下一个请求。

代码

HTML

<form id='frmAjax' method='post' action='run_form.php'>
    <span>1</span><input type="checkbox" name='option' value='test1'><br>
    <span>2</span><input type="checkbox" name='option' value='test2'><br>
    <span>3</span><input type="checkbox" name='option' value='test3'><br>
    <span>4</span><input type="checkbox" name='option' value='test4'><br>
    <span>5</span><input type="checkbox" name='option' value='test5'><br>
    <span>6</span><input type="checkbox" name='option' value='test6'><br>
    <span>7</span><input type="checkbox" name='option' value='test7'><br>
    <span>8</span><input type="checkbox" name='option' value='test8'><br>
    <span>9</span><input type="checkbox" name='option' value='test9'><br>

    <input id='btnAjax' type='button' value='Submit AJAX'>
</form>

Javascript代码

$("#btnAjax").click(function() {
    var options = $("#frmAjax input:checkbox:checked");

    $(options).each(function(i) {
        var postData = {option: $(options[i]).val()};

        $.ajax({
            type: "POST",
            data: postData,
            url: "run_ajax.php", 
            success: function(result) {
                console.log(result);
            },
            statusCode: {
                500: function() {
                    console.log("Error");
                }
            }
        });
    });
});

PHP 代码

<?
    echo("Success on ".$_POST["option"].".");
    sleep(5);
?>

问题

我的问题是，如何使 AJAX 调用递归，直到前一个请求完成后才发送下一个请求？

Answer 1

尝试一下这个，反正你还没有走得太远;)

function sendMail($options){
    if (!$options.length) return;

    $.ajax({
        type: "POST",
        url: "run_ajax.php",
        data: {option:$options.eq(0).val()},
        success: function(result){
            console.log(result)
        },
        statusCode: {
            500: function(){
                console.log("Error")
            }
        }
    }).always(function(){
        sendMail($options.slice(1))
    });
}

$("#btnAjax").on('click',function(e){
    e.preventDefault();
    sendMail($("#frmAjax input:checkbox:checked"));
});