AJAX запрос блокирует показ DIV элемента

Question

Всем доброго дня. Столкнулся с ситуацией в которой синхронный запрос ajax блокирует показ элемента ожидания. Задача следующая: показываю div элемент с анимацией ожидания, отправляю запрос, получаю ответ, скрываю div элемент ожидания. В результате элемент не показывается визуально, запрос отправляется/принимается. Но, что собственно и не понятно, при пошаговой отладке div элемент показывается. Ответ на запрос по длительности ожидания 3-5 секунд, т.е. за это время элемент успеет отразиться на экране. Пробовались разные варианты показа элемента (на чистом JS, и c JQuery), а так же разные места размещения строки, которая показывает элемент (в функции вместе с запросом, в предшествующей запросу функции). При использовании асинхронного запроса все проходит успешно - элемент показывается и убирается так как надо. Собственно и вопрос - в связи с чем синхронный запрос вызывает подобное поведение? Ведь команды, при синхронном варианте, должны выполняться последовательно.

$('#waitElement').show();
jQuery.ajax({
  type: "GET",
  url: "getData.php",
  dataType: "json",
  async: false,
  success: function (data) {
    $('#waitElement').hide();
  },
  error: function (jqXHR, textStatus, errorThrown) {
    $('#waitElement').hide();
  }
});

Answer 1

Обрами запрос в requestAnimationFrame():

$('#waitElement').show();
requestAnimationFrame(()=>{
  jQuery.ajax({
    type: "GET",
    url: "getData.php",
    dataType: "json",
    async: false,
    success: function (data) {
      $('#waitElement').hide();
    },
    error: function (jqXHR, textStatus, errorThrown) {
      $('#waitElement').hide();
    }
  });
 });

Только анимация наверное не будет работать, а сам элемент покажется. Просто синхронный запрос блокирует дальнейшее выполнения скриптов, анимаций и всего на странице, даже само окно браузера иногда подвисает, что аж и остановить этот запрос нельзя, пока не получит ответ - не отвиснет.

БЛОГ НА HUSL

AJAX запрос блокирует показ DIV элемента

Ответы (1 шт):