如何避免 AJAX 调用时出现 ERR_INSUFFICIENT_RESOURCES

Question

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

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

刷新至少需要10分钟。因此，对于浏览器来说，等待加载一段时间而没有反馈给用户将是痛苦的。我认为向用户提供反馈的最佳方式是通过一个简单的 JQuery 脚本，让用户随时了解更新进度。

这是脚本：

    var n = 0;
    function increment() {
        n++;
        return n;
    }
    $(document).ready(function() {
        $("#popme").click(function(event) {
            n = 0;
            $.getJSON('/path/to/json_pids', function(data) {
                var numRecords = data.length;
                $("#pop-result").html('<p>' + numRecords + ' records</p>');
                $.each(data, function(row) {
                    $.ajax({
                        url: '/path/to/json_student_info/' + this,
                        success: function() {
                            increment();
                            $("#pop-result").html('<p>' + n + ' / ' + numRecords + ' records</p>');
                        }
                    });

                });
            });
        });
    });

此脚本中发生了什么：

有一个

div

，其中

pop-result

ID 已更新。

/path/to/json_pids

返回匹配学生 ID 的 JSON 数组。

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

/path/to/json_student_info/{student_id}

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

成功后，脚本应该增加

pop-result

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

结果和我的问题

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

ERR_INSUFFICIENT_RESOURCES

错误。剧本从来没有把所有的记录都写完。它可能会达到约 11,000 条记录中的约 4,000 条，然后就消失了。

我有一种感觉，我在这里犯了一个菜鸟错误。在过去的几天里，我一直在寻找类似的场景，但没有找到任何有帮助的东西。我能找到的最好的想法是将数据分成块，但我仍然收到相同的错误和行为。有没有一种替代/更好的方法来完成我想要完成的任务，或者有一种方法可以减少该脚本在浏览器上的强度？

Answer 1

我确信以下代码仍然可以优化，但这是一种节流方法：

$(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();
                }
            });
        }
    }
});

理论上，这应该在前一个项目完成处理后递归地使用下一个项目调用您的服务。换句话说，它将使操作看起来同步，因为一次只会处理一个操作，但它使用回调来反对

async

标志，正如您上面提到的，该标志已被弃用。

Answer 2

我一次请求了 5800 个ajax，但出现了这个错误

我如何修复它：

我为用户设置了10次ajax和进度条加载后的延迟

您可以更改时间

链接 1：(stackoverflow.com) Ajax 延迟

链接 2：(stackoverflow.com) 在 For 循环中使用 SetTimeout

这是代码：

// Define this Function as Global | Link 1
var myAjaxConnection = function (param = null) {
        $.ajax({ /* Your Config */});
    }
// Define this Function as Global too | Link 2
function runTheTimeout(time, param = null){
    setTimeout(function(){myAjaxConnection(param)}, time);
}
// My Code 
arr = [1..5800]; // IMPORTANT: Your data
var timesLimit = 10;
for (var i = 0; i < arr.length; i++) {
    var time = ((i % timesLimit ) == 0) ? 15000 : ((i % timesLimit ) * 300);
    runTheTimeout(time); // You Can Send Param Too :] 
}