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