Home>

Good day everyone. Faced a situation where a synchronous ajax request is blocking the display of the wait item. The task is as follows: I show a div element with a waiting animation, send a request, receive a response, hide the waiting div element. As a result, the element is not displayed visually, the request is sent /received. But, which is actually not clear, during step-by-step debugging of the div element is shown. Response to a request for a waiting time of 3-5 seconds, i.e. during this time, the element will have time to be reflected on the screen. We tried different options for showing an element (in pure JS, and with JQuery), as well as different placements for the line that shows the element (in a function along with a request, in a function preceding a request). When using an asynchronous request, everything goes well -the element is shown and removed as needed. Actually, the question is -why does a synchronous request cause this behavior? After all, commands, with a synchronous version, must be executed sequentially.

$('#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();
  }
});

Exact answer in English SO

Вася Воронцов2021-11-25 05:44:18

The answer is simple: don't use a synchronous request

Alexey Ten2021-11-25 06:36:50