多Javascript Ajax调用阻止了UI（Laravel REST）

Question

我使用$ .GET（）异步获取仪表板的数据（汇总时间帧）。脚本很简单，我等着使用$(window).load(function () {}完全呈现页面（字体，图标......）。 然后我使用document.querySelectorAll('[data-id]');搜索相关的ID并在for循环中启动查询。

// some date ranges I'm using for the request
var request = [
    [moment(), moment(), 'today'],
    ( ... )
    [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year'), 'last-year']
 ];

// find all data-id elements
var t = document.querySelectorAll('[data-id]');
for (var i = 0; i < t.length; i++) {
    // extract the id
    var mid = t[i].getAttribute('data-id');
    // iterate the request array
    for (var j = 0; j < request.length; j++) {
        requestData(mid, request[j]);
    }
}

function requestData(id, time) {
    $.ajax({
        url: "/api/v1/data/point/" + id,
        type: 'GET',
        data: {
            from: time[0].format('YYYY-MM-DD'),
            to: time[1].format('YYYY-MM-DD'),
            sum: true
        },
        dataType: 'json',
        success: function (response) {
            // find elements by id stuff and replace the innerHTML with the response value (it is just to long to display here, but nothing special).
        }
    });
}

问 当页面正在执行~5-12 GET请求时，页面被完全阻止，我无法通过单击链接加载其他页面。那么这里什么基本上错了？该行为是否也可能与Web服务器的功能相关，这些12个GET请求会导致负载过重？我还注意到，如果我使用jquerys $（document）.ready函数，那么图标会在$ .Ajax完成后呈现 - 这会产生正方形而不是图标。

编辑：我认为API的mysql调用可能会阻塞服务器？

Edit2：默认情况下，async为true（http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings）

Answer 1

您可以在AJAX调用中添加 async：false 。

function requestData(id, time) {
$.ajax({
    url: "/api/v1/data/point/" + id,
    type: 'GET',
    async: false,
    data: {
        from: time[0].format('YYYY-MM-DD'),
        to: time[1].format('YYYY-MM-DD'),
        sum: true
    },
    dataType: 'json',
    success: function (response) {
        // find elements by id stuff and replace the innerHTML with the response value (it is just to long to display here, but nothing special).
    }
});

}

如果这不起作用，则将其替换为true。

Answer 2

以下是关于如何改善状态的想法：

• 您是否跟踪了网页的时间轴（在Chrome开发工具的时间轴标签中）？它将显示页面性能的高峰和低点。泛滥的原因可能与Ajax不同。
• 我相信您知道浏览器只能同时运行有限数量的请求，无论它们是否同步异步。在您的情况下，它是6.您可以缓存请求，以便您不会每次都执行实际请求吗？