Question

我正在制作一份调查问卷，询问有关大约400个地点的信息。每个位置需要有10到40个问题。在位置概述中，我想显示是否已经给出了所有必需的答案，但确定每个位置几乎需要半秒钟。这使得加载页面的时间过长。通过使用以下代码异步检索位置状态，解决了（现在）：

$(function () { // On document load
        $('.location').each(function () {
            var locationId = $(this).data('location_id');
            $.ajax({
                type: 'GET',
                url: '/location/' + locationId + '/complete',
                success: function (result) {
                    var locWait = $('#comp_l' + locationId + 'wait');
                    locWait.hide(); // Hide loading spinner
                    if (result == 'true') {
                        var locYes = $('#comp_l' + locationId + 'yes');
                        locYes.show(); // Show completion mark
                    } else {
                        var locNo = $('#comp_l' + locationId + 'no');
                        locNo.show(); // Show incomplete mark
                    }
                }
            });
        });
    });

上述代码使网站加载速度明显加快（2秒而不是2分钟），并且（in）完成标记出现在以下时间。

到目前为止，这一切都符合要求。当用户尝试加载位置详细信息时，会出现此问题。使用此功能加载详细信息：

function load(id) {
        var detailPane = $('#detail_pane');
        detailPane.html('<h3><span class="fa fa-pulse fa-spinner"></span>  Loading location details</h3>');

        $.ajax({
            type: 'GET',
            url: '/location/' + id + '/details/',
            success: function (html) {
                detailPane.html(html).show();
                draw(); // Does some final checks on the detailPane
            },
            error: function (error) {
                detailPane.html('<h3>Could not retrieve location details</h3><br><p>' + JSON.stringify(error, null, 4) + '</p>');
            }
        });
    }

由于仍有关于完成位置的后端调用，因此只有在正确绘制所有标记后才会加载详细信息。有什么方法可以确保及时加载细节吗？

Answer 1

至少有两个三种方法：

不是向服务器发送40个单独的ajax请求，而是使用所需的40个位置列表发送一个。大多数浏览器和服务器在浏览器和服务器之间至少允许两个连接，因此如果该呼叫未完成，它不应该阻止一个额外的ajax呼叫（但是你的里程可能会有所不同，总是要测试以确保）。服务器可以在会话中序列化呼叫，因此如果确实如此，您将需要允许该呼叫。
或者，一次只使用一个队列执行一个ajax请求（当前一个请求完成时启动下一个请求），当您需要加载用户要求的信息时，请将其放入队列的前面。然后它只会等待当前正在运行的请求完成，而不是等待所有请求。
对40个位置使用套接字I / O而不是ajax请求。但这可能是个大锤子。

优先考虑AJAX调用

1 个答案: