Browser suspended animation during ajax synchronization operation (detailed tutorial)

Below I will share with you an article that solves the problem of browser suspended animation caused by js ajax synchronization request. It has a good reference value and I hope it will be helpful to everyone.

1. The cause of the problem

#I encountered a situation when I made a request today, that is, there is a function in the user's personal center. Click the button. You can refresh the user's current points. This definitely requires the use of ajax synchronization requests. At that time, I wrote and played with three, five, and two. The approximate code is as follows:

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>&#39;);
  $.ajax({
   url:&#39;URL&#39;,
   type:&#39;post&#39;,
   async:false,
   // data:{},
   success:function(json){
    json = eval(&#39;(&#39;+json+&#39;)&#39;);
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>&#39;);
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

I thought such a simple function was Just write it and it will be fine. However, a problem occurred during operation. When the user clicked the refresh points button, the copy was not changed to "Refreshing", but the ajax request was sent. So I checked the web page code and found that js actually changed the copy. The onclick event bound to the html element was removed and changed back to the original after the request was successful, but the copy on the page did not change. It was strange at the time. I don’t know why the html code changed but the page did not change.

2. Understand the cause of the problem

The root of the problem: I conducted a troubleshooting at that time, and finally found that it was an "async:false" problem, and replaced it with There is no problem if it is asynchronous, so why does synchronous request cause code failure?

Reason: The browser's rendering (UI) thread and 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 in 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.

3. Solve the problem

1. I used setTimeout to solve the problem, put the ajax code in sestTimeout and let the browser restart One thread to operate, this solves the problem, the code is as follows:

function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>&#39;);
  setTimeout(function(){
   $.ajax({
    url:&#39;URL&#39;,
    type:&#39;post&#39;,
    async:false,
    // data:{},
    success:function(json){
     json = eval(&#39;(&#39;+json+&#39;)&#39;);
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>&#39;);
     if(json.code!=1){
      alert(json.msg);
     }else{
      $("#free_sum").html(json.free_sum);
     }
     return;
    }
   });
  },0) 
 }

The second parameter of setTimeout is set to 0, and the browser will execute it after a set minimum time

The problem is solved here, but you can try it. If you need to pop up a gif picture when you click the button, and the picture keeps rotating, it will prompt that the picture is being updated. You will find that the picture is being updated. Although it will be displayed, the picture does not move. That is because although the synchronization request is delayed, it will 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. This method is only suitable for simple and short operations before sending the request.

2. Use Deferred to solve

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement custom instructions in Vue?

How to modify the sub-component style through the parent component in vue

Related to jsonp cross-domain issues in vue-resource

How to implement asynchronous component loading in vue webpack?

Use Nginx in vue.js to solve cross-domain issues

How to achieve the maximum common substring in JavaScript

How to implement mysql transaction automatic recycling connection in Node.js

The above is the detailed content of Browser suspended animation during ajax synchronization operation (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!