javascript - 如何避免 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 条，然后就从那里消亡。

我觉得我在这里犯了一个新手错误。在过去的几天里，我一直在寻找类似的场景，但没有找到任何有用的东西。我能找到的最好的办法是将数据分成 block ，但我仍然收到相同的错误和行为。是否有替代/更好的方法来完成我想要完成的事情，或者有什么方法可以降低此脚本在浏览器上的强度？

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 标志，正如您在上面提到的那样，该标志已被弃用。