UI thread blocking problem caused by Jquery ajax synchronization blocking_jquery

Recently working on a project, I encountered a problem of UI thread blocking caused by synchronized ajax. Let me share my problem solving process with you.

The reason is this, because there are multiple similar asynchronous request actions on the page. In order to improve the reusability of the code, I encapsulated a function called getData, which receives different parameters and is only responsible for obtaining data. , and then return the data. The basic logic stripped out is as follows:

function getData1(){
    var result;
    $.ajax({
      url : "p.php",
      async : false,
      success: function(data){
        result = data;
      }
    });

  return result;
}　

The ajax here cannot be asynchronous, otherwise when the function returns, the result has not been assigned a value, and an error will occur. So I added async:false. There seems to be no problem. I can get the data normally by calling this function.

$(".btn1").click(function(){
    var data = getData1();
    alert(data);
});

Next, I want to add another function. Since the ajax request is time-consuming, I need to have a loading effect on the page before sending the request, that is, displaying a "loading" gif image. I think everyone will also Saw it. So my processing function becomes like this:

$(".btn1").click(function(){
    $(".loadingicon").show();
    var data = getData1();
    $(".loadingicon").hide();
    alert(data);
});

Show the loading image before requesting and hide it after the request is completed. There seems to be no problem. In order to see the effect clearly, my p.php code sleeps for 3 seconds, as follows:

<&#63;php
sleep(3);
echo ("aaaaaa");
&#63;>

But a problem occurred when I ran it. When I clicked the button, the loading image did not appear as expected, and the page did not respond at all. After troubleshooting for a long time, I found the reason, which is async:false.

The browser's rendering (UI) thread and the js thread are mutually exclusive. When executing js time-consuming operations, page rendering will be blocked. There is no problem when we execute asynchronous ajax, but when set to a synchronous request, other actions (the code behind the ajax function, and the rendering thread) will stop. Even if my DOM operation statement is the sentence before the request is initiated, this synchronization request will "quickly" block the UI thread without giving it time to execute. This is why the code fails.

setTimeout solves blocking problem

Now that we understand what the problem is, let’s find a solution. In order to prevent the synchronous ajax request from blocking the thread, I thought of setTimeout, put the request code in sestTimeout, and let the browser restart a thread to operate. Wouldn't the problem be solved? Ever since, my code became like this:

$(".btn2").click(function(){
    $(".loadingicon").show();
    setTimeout(function(){
      $.ajax({
        url : "p.php",
        async : false,
        success: function(data){
          $(".loadingicon").hide();
          alert(data);
        }
      });
    }, 0);
});　

The second parameter of setTimeout is set to 0, and the browser will execute it after a set minimum time. No matter what, let's run it first and see.

The result loading picture is displayed, but! ! ! Why doesn't the picture move? It's obviously an animated gif. At this time, I quickly thought that although the synchronization request was delayed, it would still block the UI thread during its execution. This blocking is so awesome that even the gif image doesn’t move and looks like a static image.

The conclusion is obvious. SetTimeout treats the symptoms but not the root cause. It is equivalent to making the synchronization request "slightly" asynchronous. Then it will still enter a synchronization nightmare and block the thread. The plan failed.

It’s time to use Deferred

jQuery introduced the Deferred object after version 1.5, which provides a very convenient generalized asynchronous mechanism. For details, please refer to this article by teacher Ruan Yifeng http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html.

So I rewrote the code using Deferred objects, as follows:

function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : "p.php",
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
}  
$(".btn3").click(function(){
    $(".loadingicon").show();
    $.when(getData3()).done(function(data){
      $(".loadingicon").hide();
      alert(data);
    });
});

You can see that I removed async:false in the ajax request, which means that the request is asynchronous again. Please also pay attention to this sentence in the success function: defer.resolve(data). The resolve method of the Deferred object can pass in a parameter of any type. This parameter can be obtained in the done method, so the data we requested asynchronously can be returned in this way.

At this point, the problem has been solved. Deferred objects are so powerful and convenient, we can take advantage of them.

All my test codes are as follows, interested students can use them to test:

<button class="btn1">async:false</button>
<button class="btn2">setTimeout</button>
<button class="btn3">deferred</button>
<img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src=http://www.update8.com/Web/Jquery/"loading2.gif" alt="正在加载" />
<script>
  function getData1(){
    var result;
    $.ajax({
      url : "p.php",
      async : false,
      success: function(data){
        result = data;
      }
    });
    return result;
  }
  $(".btn1").click(function(){
    $(".loadingicon").show();
    var data = getData1();
    $(".loadingicon").hide();
    alert(data);
  });
  $(".btn2").click(function(){
    $(".loadingicon").show();
    setTimeout(function(){
      $.ajax({
        url : "p.php",
        async : false,
        success: function(data){
          $(".loadingicon").hide();
          alert(data);
        }
      });
    }, 0);
  });
  function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : "p.php",
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
  }  
  $(".btn3").click(function(){
    $(".loadingicon").show();
    $.when(getData3()).done(function(data){
      $(".loadingicon").hide();
      alert(data);
    });
  });</script>

ps:Parameter description of $.ajax

Parameter Description

url required. Specifies the URL to which the request should be sent.
data is optional. Map or string value. Specifies the data to be sent to the server with the request.
success(data, textStatus, jqXHR) Optional. The callback function executed when the request is successful.
dataType
Optional. Specifies the data type of the expected server response.
Intelligent judgment is performed by default (xml, json, script or html).