Синхронные ajax запросы вешают страницу, как исправить?

Question

[yazux]

Использую аякс чтобы получит некоторые данные с сервера, при удачном запросе обрабатываю их и отдаю в коллбек функцию, где опять же провожу некоторые манипуляции. Запрос отправляется синхронно так как находится в цикле и отправляется 4-10 раз подряд, для получения разных данных. Но проблема в том, что пока отрабатывают запросы, страница полностью блокируется. От сюда вопрос: либо как выполнить синхронные запросы без блокировки страницы, либо как сделать запросы асинхронными, но с получением информации, сейчас если делать запросы асинхронными то вместо данных в коллбек функцию приходит undefined, так как она вызывается раньше, чем приходит ответ от сервера.
Вот сам запрос:

var jqxhr = $.ajax({
        type: "POST",
        url: "/mycontroller/myaction",
        dataType: "json",
        async: false,
        cache: true,
        data: {data : mydata},
    error: function(event){
        console.log("fail");            
        return callback(false);
    },
    success: function(event){
        console.log("ok");
        //Тут провожу обработку данных, использую данные полученные с сервера
        return callback(event);
    }
    });

Comments

[inDeepCode]

В заголовке вы написали асинхронные, а в коде async: false, где асинхронность брат?

[Роман Назаркин]

Поддержка синхронных XHR запросов в скором времени будут отключена в браузерах, не советую их использовать.

[yazux]

inDeepCode: приведённый код работает так как мне надо, но блокирует страницу. Если запускать его же, но асинхронно то в success получаю вместо данных undefined

[inDeepCode]

yazux: если бы он работал как надо - он бы не блокировал страницу.

Answer 1

[Денис Инешин]

Вы видно не очень поняли принцип работы коллбэков. Поскольку они вызываются асинхронно, то return там не применим. Нужно вызывать следующий шаг, примерно так:

$.ajax({
    success: function(data){
        console.log("ok");
        //Тут провожу обработку данных, использую данные полученные с сервера
        nextStep(data);
    }
});

function nextStep (data) {
    // вот тут ваши данные будет доступны
}