AJAX call останавливает загрузку страницы другими элементами

Question

AJAX call останавливает загрузку страницы другими элементами

0

Я создаю сайт, используя 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, поэтому она не является специфичной для браузера.

EDIT: даже когда for-loop удаляется, и новый вызов ajax выдается только после устранения проблемы, если вызов длится долго.

EDIT2: Возможно ли, что Laravel/Php ограничивает количество соединений, которые может открыть один клиент?

EDIT3: Кажется, мой сервер вызывает проблему. Когда я загружаю изображения с другого сервера, чем мои собственные, они загружаются штрафом во время запросов ajax.

Yoran 15 фев. 2017, в 00:52

Источник

0

Что находится в вашей новой функции AJAXCall? Вы также сделали это асинхронным?
Chris Chen 14 фев. 2017, в 23:57
0

Это аналогичный вызов AJAX, за исключением того, что этот вызов не вызывает новый вызов AJAX. Я установил оба на асинхронный.
Yoran 14 фев. 2017, в 23:58
0

Я считаю, что это цикл for, который вызывает вашу проблему. Возможно, вам придется изменить способ использования newAJAXCall () stackoverflow.com/questions/4288759/…
Chris Chen 15 фев. 2017, в 00:02
0

Я тоже об этом подумал, но когда я выношу его из цикла for и запускаю только для одного из более длинных AJAX, проблема не исчезнет.
Yoran 15 фев. 2017, в 00:05
0

Посмотрите на вашу консоль / график времени, чтобы увидеть, что именно блокирует.
Kevin B 15 фев. 2017, в 00:16
0

Где именно я могу найти это? Кажется, это второй вызов Ajax, как я и думал. Когда я смотрю на изображение, оно говорит, что оно остановилось на 5 секунд, что является точным количеством времени, которое занимает второй вызов ajax. Возможно ли, что Laravel ограничивает количество соединений, которые может открыть клиент?
Yoran 15 фев. 2017, в 00:19

Показать ещё 4 комментария

Теги:

php

javascript

jquery

laravel

ajax

2 ответа

Ещё вопросы

Что находится в вашей новой функции AJAXCall? Вы также сделали это асинхронным?
Это аналогичный вызов AJAX, за исключением того, что этот вызов не вызывает новый вызов AJAX. Я установил оба на асинхронный.
Я считаю, что это цикл for, который вызывает вашу проблему. Возможно, вам придется изменить способ использования newAJAXCall () stackoverflow.com/questions/4288759/…
Я тоже об этом подумал, но когда я выношу его из цикла for и запускаю только для одного из более длинных AJAX, проблема не исчезнет.
Посмотрите на вашу консоль / график времени, чтобы увидеть, что именно блокирует.
Где именно я могу найти это? Кажется, это второй вызов Ajax, как я и думал. Когда я смотрю на изображение, оно говорит, что оно остановилось на 5 секунд, что является точным количеством времени, которое занимает второй вызов ajax. Возможно ли, что Laravel ограничивает количество соединений, которые может открыть клиент?

Yoran · Answer 1 · 2017-02-15T16-07-00.000Z

Проблема заключалась в том, что мой сервер localhost не имел достаточной емкости. Когда сайт работает на моем выделенном сервере, все загружается нормально.

Chris Chen · Answer 2 · 2017-02-14T22-14-00.000Z

В соответствии с моим комментарием, пожалуйста, подумайте о том, чтобы положить цикл в функцию успеха 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) {

    }
});

}

Спасибо за ваш ответ. Однако цикл for, похоже, не вызывает проблемы. Когда я вынимаю его и запускаю ajax-вызов только один раз для одного из более длинных вызовов, проблема сохраняется.
stackoverflow.com/questions/18366118/… Я считаю, что это ответ тогда :)
async: false в этом случае не используется, так что нет, это не ответ.
Именно так. Кажется, это не проблема. Когда я изменяю его на async = false, вы видите разницу, потому что весь div не загружается до завершения вызова.
эмм ... Может ли это быть причиной тогда? stackoverflow.com/questions/7101573/… stackoverflow.com/questions/9189591/…
Я узнал, что мой сервер является проблемой. Когда я загружаю изображения с другого сайта, они нормально загружаются во время запроса ajax.