JS Ajax sync request causes the browser to feign animation problems

Tag: Set on () CLI thread to execute ref modify else time short

I. Causes of the problem

Today to do a demand encountered a situation, that is, the user's personal center has a function, click the button, you can refresh the user's current points, this must be used to the AJAX synchronization request, at that time, Kabul rinsed write play, approximate code as follows:

/** * Async Current User integral by ZGW 20161216 * @return {[type]} [description] */function flushintegralsum () {
Click on the button to refresh the copy of the button before it has been removed click the thing, to prevent multiple clicks of $ ("#flushbutton"). ReplaceWith ('<astyle= "color: #3fb0ff; font-size:14px;"href= "javascript:void (0);"ID= "Flushbutton">is refreshing</a>'); $.ajax ({url: ' url ', type: ' Post ', async:false,//data:{}, Success:functi               On (JSON) {json = eval (' (' +json+ ') ');               if (Json.url) {Window.location.href=json.url;return;} $ ("#flushbutton"). ReplaceWith ('<astyle= "color: #3fb0ff; font-size:14px;"href= "javascript:void (0);"onclick= "flushfreesum ();"ID= "Flushbutton">Refresh Points</a>');               if (json.code!=1) {alert (json.msg);               }else{$ ("#free_sum"). HTML (json.free_sum);            } return;    }        }); }

I thought it was a simple function. kerala Write it all right, in the run time there is a problem, when the user clicked the Refresh Points button, the copy is not modified to "refreshing", but the Ajax request sent, so I look at the page code, Found JS in fact, the text and HTML elements binding onclick event removed, after the request has changed back to the original, but the page above the copy has not changed, it was very strange, do not know why the HTML code inside changed, the page has not changed the point of change

Second, understand the cause of the problem

The root of the problem: I was at the time of the investigation, and finally found that the "async:false" problem, replaced by the asynchronous there is no problem, then why the synchronization request will produce code failure problem?

Cause: The browser's rendering (UI) thread and the JS thread are mutually exclusive, and when the JS time-consuming operation is performed, the page rendering is blocked out. There is no problem when we execute asynchronous Ajax, but when set to synchronous requests, other actions (the code behind the AJAX function and the render thread) will stop. Even if my DOM action statement is the previous sentence of the initiating request, the synchronization request will "quickly" block the UI thread and not give it time to execute . This is why the code fails.

Third, solve the problem

1. I used the setTimeout to solve, put the Ajax code in the Sesttimeout, let the browser restart a thread to operate, so that solves the problem, the code is as follows:

function Flushintegralsum () {//Click on the button to change the copy of the button before the refresh, has removed the click Thing, prevent multiple clicks of $ ("#flushbutton"). ReplaceWith ('<a style= "color: #3fb0ff; font-size:14px;" href= "javascript:void (0); id=" Flushbutton "> Refreshing </a> '); setTimeout (function () { $.ajax ({url: ' url ', type: ' Post ', a Sync: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); "onclick = "Flushfreesum ();" id= "Flushbutton" > Refresh Points </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 executes after a set minimum time

The problem is solved here, but you can try when you click on the button if you need to pop up a gif picture, and the picture has been rotated, prompting the update, you will find that the picture will be displayed, but the picture is not moving, because although the synchronization request deferred execution, However, it will block the UI thread during execution. The block is pretty cool, and even the GIF doesn't move, it looks like a static picture. conclusion It is obvious that the settimeout symptom is not the root cause, equivalent to the synchronous request "slightly" asynchronous, followed by the synchronization of the nightmare, blocking the thread, this method is only suitable for the operation of a simple short time before the request of the case

2. Use Deferred to solve

After work, and then continue .....

JS Ajax sync request causes the browser to feign animation problems