Javascript 如何避免在AJAX调用中出现资源不足的错误

我已经有一段时间没有尝试使用JavaScript了，所以请容忍我。我正在开发一个提供学生数据报告的应用程序。后端是PHP

我们用于这些报告的数据库必须从中央仓库不时刷新。刷新由最终用户自行决定，并且由于各种原因而不是自动进行的，不值得在此讨论

刷新至少需要10分钟。因此，如果浏览器长时间坐在那里加载而没有反馈给用户，那将是一件痛苦的事情。我认为向用户提供反馈的最佳方式是通过一个简单的JQuery脚本，让用户了解更新的最新进展

以下是脚本：

var n=0；
函数增量（）{
n++；
返回n；
}
$（文档）.ready（函数（）{
$（“#popme”）。单击（函数（事件）{
n=0；
$.getJSON（'/path/to/json_-pids'，函数（数据）{
var numRecords=data.length；
$（“#pop result”）.html（“”+numRecords+”记录“
”）；
$。每个（数据、函数（行）{
$.ajax({
url:'/path/to/json_student_info/'+此，
成功：函数（）{
增量（）；
$（“#pop result”）.html（“”+n+/”+numRecords+'records
”）；
}
});
});
});
});
});

此脚本中发生了什么：

有一个

div

，其中

pop result

ID得到更新。

/path/to/json_-pids

返回匹配学生ID的json数组

从那里，脚本循环遍历每个记录并调用

/path/to/json\u student\u info/{student\u id}

，但不需要任何回报。第二个URL调用后端上的脚本，该脚本在报告数据库中创建/更新该学生的记录

成功后，脚本应增加

pop result

中显示的数字，以便用户可以看到脚本完成的进度

结果和我的问题

结果有点乱。JS控制台显示了一整行

ERR\u资源不足
错误。剧本从来没有在所有的记录中都出现过。它可能会达到11000条记录中的4000条，然后从此消亡

我觉得我在这里犯了一个新手错误。在过去的几天里，我一直在寻找类似的场景，但没有找到任何有帮助的。我能找到的最好办法是将数据分成块，但我仍然收到相同的错误和行为。是否有其他/更好的方法来完成我正在尝试完成的任务，或者有一种方法可以降低此脚本在浏览器上的强度？
我确信以下代码仍然可以优化，但这里有一种限制性方法：

$(document).ready(function() {
    // Declare variable to hold data...
    var results = [],
        length = 0;

    $("#popme").click(function(event) {

        // Get Data
        $.getJSON('/path/to/json_pids', function(data) {

            // Store returned results in value accessible by all functions
            results = data;
            length = results.length;

            $("#pop-result").html('<p>' + length + ' records</p>');

            processItem();
        });
    });

    function processItem() {
        // Check length, if 0 quit loop...
        if(results.length) {
            // Make a call always referencing results[0] since we're shfiting the array results...
            $.ajax({
                url: '/path/to/json_student_info/' + results[0],
                success: function() {
                    $("#pop-result").html('<p>' + ((length - results.length) + 1) + ' / ' + length + ' records</p>');
                    // Remove the first item to prepare for next iteration...
                    results.shift();
                    // Yay! for recursive functions...
                    processItem();
                }
            });
        }
    }
});

$（文档）.ready（函数（）{
//声明变量以保存数据。。。
var结果=[]，
长度=0；
$（“#popme”）。单击（函数（事件）{
//获取数据
$.getJSON（'/path/to/json_-pids'，函数（数据）{
//将返回的结果存储在所有函数都可以访问的值中
结果=数据；
长度=结果。长度；
$（“#pop result”）.html（“”+length+”记录
”）；
processItem（）；
});
});
函数processItem（）{
//检查长度，如果0退出循环。。。
如果（结果长度）{
//调用始终引用结果[0]，因为我们正在刷新数组结果。。。
$.ajax({
url:'/path/to/json_student_info/'+结果[0]，
成功：函数（）{
$（“#pop result”）.html（“”+（（length-results.length）+1）+“/”+length+”记录
”）；
//删除第一项以准备下一次迭代。。。
结果：shift（）；
//耶！对于递归函数。。。
processItem（）；
}
});
}
}
});

理论上，这应该在上一个项目完成处理后，使用下一个项目递归调用您的服务。换句话说，它将使操作看起来是同步的，因为一次只处理一个操作，但它使用回调来反对
async
标志，正如您前面提到的，该标志已被弃用。
您正在以浏览器允许的速度向服务器发送11k ajax请求。这是相当多的处理。可能会限制它一点。听起来您无意中在服务器上造成了样式拖拽，如果您考虑到
$调用的异步性质，这并不奇怪。ajax
调用将允许浏览器在超短时间内启动大量请求。我认为你正在消耗所有可用的资源，填满请求池或应用程序池，然后死亡。您可以尝试在前一个
$.ajax
调用的成功回调中的第一个请求之后启动每个后续请求。我同意。我考虑尝试某种方法来减缓对服务器的请求。我意识到，在JQuery中关闭
async
是不可取的，而且无论如何都会达不到这个目的。另一种方法，使用名为的库看起来也不是一个好的解决方案，因为它似乎不再被维护。@Joeventures我在下面添加了一个答案，它利用递归性质的回调来限制发送的请求数。本质上，它的行为就像
async:true
一样，但在非锁定异步状态下，它现在正在运行，看起来就像一个魔咒。这是一个很好的解决方案。我真的很喜欢这个