javascript - 多个 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 请求时，页面完全被阻止，我无法通过单击链接加载另一个页面。那么这里基本上有什么问题？这 12 个 GET 请求导致负载过重的行为是否也可能与 Web 服务器的能力有关？我还注意到，如果我使用 jquerys $(document).ready 函数，图标会在 $.Ajax 完成后呈现 - 这会导致生成正方形而不是图标。

编辑:我想也许 API 的 mysql 调用阻塞了服务器？

Edit2:默认情况下异步为真(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。