Javascript jqueryajax递归 背景

我制作了一个PHP脚本，通过POST循环用户ID向许多用户发送电子邮件。当我尝试与许多用户（1000+以上）一起使用脚本时，脚本超时

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

代码 HTML PHP代码

问题:

---

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

您可以使用

success

函数调用下一个

AJAX

请求，如下所示：

let optionsLength = 0;
let optionsCount = 0;
$("#btnAjax").click(function() {
   optionsLength = $("#frmAjax input:checkbox:checked").length;
   callAjax();
});

function callAjax() {
 let postData = {option: $(options[optionsLength-optionsCount]).val()};
 $.ajax({
        type: "POST",
        data: postData,
        url: "run_ajax.php", 
        success: function(result) {
            optionsCount = optionsCount + 1;
            callAjax();
        },
        statusCode: {
            500: function() {
                console.log("Error");
            }
        }
    });
}

---

这是一些伪代码，您可能需要对其进行调整，但我希望它会给您带来一个好主意。

试试这一个，反正您还没走到这一步；）

---

我希望有几点可以帮助你：

• 对于您的PHP脚本超时，您可以冒险进入

  set\u time\u limit（0）

  进行无休止的脚本运行

• 因为你的回答似乎是同步的。您的PHP可能是多线程的，因此它将并行处理每个请求，因此，您将在每个请求发送5秒后收到每个响应。正如您所指出的，解决方案是延迟每个请求的发送

对于您的情况，只需创建一个队列，但如果您不希望进程在出现第一个错误时停止，最好使用完全回调：

$("#btnAjax").click(function() {
    function process(i) {
      $.ajax({
            type: "POST",
            data: queue[i],
            url: "run_ajax.php", 
            success: function(result) {
                console.log(result);
            },
            statusCode: {
                500: function() {
                    console.log("Error");
                }
            },
            complete: {
              if(i++ < (queue.length - 1) process(i);
            }
        });
    }

    var queue = [];
    var options = $("#frmAjax input:checkbox:checked");    
    $(options).each(function(i) queue.push({option: $(options[i]).val()});    
    process(0);
});

$（“#btnAjax”）。单击（函数（）{
功能过程（一）{
$.ajax({
类型：“POST”，
数据：队列[i]，
url:“run_ajax.php”，
成功：功能（结果）{
控制台日志（结果）；
},
状态代码：{
500:函数（）{
控制台日志（“错误”）；
}
},
完成：{
if（i++<（queue.length-1）进程（i）；
}
});
}
变量队列=[]；
var选项=$（“#frmAjax输入：复选框：选中”）；
$（选项）.each（函数（i）queue.push（{option:$（选项[i]）.val（）}）；
过程（0）；
});

这就是我所说的在一个请求中传递有关检查内容的所有数据。传递整个表单。一次发送一个值所带来的开销毫无意义

$("#btnAjax").click(function() {

   var myform = document.getElementById("frmAjax");
   var fd = new FormData(myform);

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

});

当然，您的服务器端代码需要处理对数据集的迭代

---

如果您需要知道服务器上发生的事情的具体结果，那么让您的

rux_ajax.php

脚本返回JSON，并提供该细节。

为什么不在第一个请求成功时发送一个新请求？是否为每个请求发送一个用户？@Taplar是的，JavaScript将向php脚本发送ID。我会强烈建议您一次发送所有内容，并让脚本执行循环，而不是javascript。强制用户为操作发出1000多个ajax请求有点疯狂。它们不是“链接”-它们都是同时发送的，您的php添加了一个假延迟。毫无疑问，此延迟是为了模拟队列，但如果您有1000封电子邮件，则需要一个半小时才能全部发送……希望您的UI上有一个不错的进度条！：）这将如何解决我的超时问题？是否因为它在浏览器中而超时？通过AJAX访问脚本是否可以解决此问题？您的问题是希望将1000个调用“链接”在一起（异步执行）。每个请求需要多长时间才能完成？那么整个过程需要多长时间才能运行？如果服务器端代码有超时问题，则独立于此客户端代码进行故障排除。出于所有目的和目的，无论是从Ajax调用还是直接在web浏览器中启动，服务器端都将以相同的方式执行。

let optionsLength = 0;
let optionsCount = 0;
$("#btnAjax").click(function() {
   optionsLength = $("#frmAjax input:checkbox:checked").length;
   callAjax();
});

function callAjax() {
 let postData = {option: $(options[optionsLength-optionsCount]).val()};
 $.ajax({
        type: "POST",
        data: postData,
        url: "run_ajax.php", 
        success: function(result) {
            optionsCount = optionsCount + 1;
            callAjax();
        },
        statusCode: {
            500: function() {
                console.log("Error");
            }
        }
    });
}

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

$("#btnAjax").click(function() {
    function process(i) {
      $.ajax({
            type: "POST",
            data: queue[i],
            url: "run_ajax.php", 
            success: function(result) {
                console.log(result);
            },
            statusCode: {
                500: function() {
                    console.log("Error");
                }
            },
            complete: {
              if(i++ < (queue.length - 1) process(i);
            }
        });
    }

    var queue = [];
    var options = $("#frmAjax input:checkbox:checked");    
    $(options).each(function(i) queue.push({option: $(options[i]).val()});    
    process(0);
});

$("#btnAjax").click(function() {

   var myform = document.getElementById("frmAjax");
   var fd = new FormData(myform);

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

});