How to solve the problem of browser suspended animation caused by js ajax synchronization request?

This article mainly shares with you an article to solve 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. Let’s follow the editor to take a look, I hope it can help 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. Clicking the button can refresh the user's current points. This is definitely It is necessary to use the synchronization request of ajax. At that time, I wrote and played with three, five, and two divisions. The approximate code is as follows:

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith('<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>');
  $.ajax({
   url:'URL',
   type:'post',
   async:false,
   // data:{},
   success:function(json){
    json = eval('('+json+')');
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith('<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>');
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

I thought that such a simple function would be fine if I just wrote it. A problem occurred during operation. When the user clicked the refresh points button, the copy was not modified to "Refreshing", but the ajax request was sent. So I checked the web page code and found that js actually removed the onclick event bound to the copy and html element. After the request was successful, it changed back to the original one, 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 troubleshooting at that time, and finally found that it was a problem with "async:false". If it was replaced with asynchronous, there would be no problem. So why would synchronous requests cause code failure?

Reason: 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.

3. Solve the problem

1. I used setTimeout to solve the problem. I put the ajax code in sestTimeout and let the browser restart a thread to operate. This solved the problem. Code As follows:

function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith('<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>');
  setTimeout(function(){
   $.ajax({
    url:'URL',
    type:'post',
    async:false,
    // data:{},
    success:function(json){
     json = eval('('+json+')');
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith('<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>');
     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 when If you need to pop up a gif picture when you click the button, and the picture keeps rotating, indicating that it is being updated, you will find that although the picture will be displayed, the picture will not move. That is because although the synchronization request is delayed, it The UI thread will still be blocked during 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

Related recommendations:

html5 WebWorkers sample code sharing to prevent browser suspended animation

Extjs Post method parameter sending method during ajax synchronization request_extjs

A brief discussion on Ajax requests and browser caching

The above is the detailed content of How to solve the problem of browser suspended animation caused by js ajax synchronization request?. For more information, please follow other related articles on the PHP Chinese website!