Question

我正在使用Laravel和Jquery建立一个网站。该页面正在发出多个AJAX调用。

其中一个调用可能需要几秒钟，而且似乎阻止了页面的其他元素加载。这包括图像和其他AJAX调用。

我的代码或多或少看起来像这样。

$.ajax({
        async: true,
        url: url,
        data: {
            //data
        },
        success: function (response) {

        //Process response (append html, images, etc.)

        for (var key in response) {
            newAJAXCall(response[key]);
            }
        },
        error: function (xhr) {

        }
    });

newAJAXCall调用如下所示：

$.ajax({
        async: true,
        url: url,
        data: {
            //data

        },
        success: function (response) {
            //Process response

        },
        error: function (xhr) {

        }
    });

newAJAXCall是导致问题的原因。一些呼叫在200毫秒内完成。但有些可能需要几秒钟。发生这种情况时，如果任何元素没有加载但它们会停止加载。

对于图像，它们的html已经存在。浏览器只是停止加载它们，直到完成AJAX调用。

我已经尝试过设置异步并使用超时但似乎没有什么可以修复它。 Chrome和Safari都会出现问题，因此它似乎并不适合浏览器。

编辑：即使删除了for循环，只有在呼叫持续时间很长时问题仍然存在，才会发出新的ajax呼叫。

EDIT2：Laravel / Php是否有可能限制单个客户端可以打开的连接数量？

EDIT3：它似乎是我的服务器导致问题。当我从不同于我自己的服务器加载图像时，它们会在ajax请求期间正常加载。

Answer 1

问题是我的localhost服务器没有足够的容量。当网站在我的专用服务器上运行时，一切正常。

Answer 2

根据我的评论，请考虑在newAJAXCall成功函数中进行循环播放

$.ajax({
    async: true,
    url: url,
    data: {
        //data
    },
    success: function (response) {

    //Process response (append html, images, etc.)


        newAJAXCall(response);
    },
    error: function (xhr) {

    }
});


function newAJAXCall(response) {
$.ajax({
    async: true,
    url: url,
    data: {
        //data

    },
    success: function (response) {

        for (var key in response) {
            //Process response[key]
        }

    },
    error: function (xhr) {

    }
});

}

AJAX调用阻止页面加载其他元素

2 个答案: