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标志，该标志已被弃用。 / p>

如何避免AJAX调用的ERR_INSUFFICIENT_RESOURCES

1 个答案: