How to solve the problem of fake death in ajax Synchronize?

there is an ajax because the business requirement must be Synchronize, but before the ajax result is returned, because the UI thread and the JS thread mutually exclusive page will be stuck for a short time, ask for a solution. Here we simply write a small demo to demonstrate the principle 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="button" onclick="console.log("1")"><button>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var fn1 = function(content){
    var t1 = new Date().getTime()
    console.log("fn1: " + "" );
    while(new Date().getTime()-t1 < 10000){

    }
    console.log("fn1: " +  ""  );
}
fn1();
</script>

in this demo, the button can output "1" during the "start" and "end" period of page printing. is there a solution?

Css html5 node.js javascript
Oct.29,2021

js is single-threaded. If you block it, you can't do anything else. Of course, it's stuck. Use asynchronous callback

first

has an ajax because the business requirement must be Synchronize

this restriction itself should be removable. No one will leave the user's page stuck and cause the user to get upset and then close your page and never want to open the site again. Synchronize can be solved with a callback. Tell me why you want to block the entire thread while waiting for the result of ajax . Is it possible that you don't know you can write a callback and poll yourself with while ?

then, if you have to implement "output 1" under a given limit, you have to add code where you block the entire thread and allow other code to be executed, which is tantamount to implementing a very small scheduling algorithm yourself. Since there is no such function as sleep in the browser, I'm sure your "Synchronize" is implemented in a loop, that is, polling or busy waiting , which not only has a very poor user experience, but also occupies a CPU core. If you do not change the loop, in order to achieve the goal, you have to check each loop to see if there is a new task to execute, take out a task to execute, and then continue the loop. You probably want to show the progress bar, so just update the progress in the loop and check whether ajax is complete.

but the best way is to remove your strange limitation and require you to provide information relevant to your business.

Synchronize is not recommended, but if you have to use it, you can only do other optimizations
1. The page gives a hint
2. The short-term deadlock of optimization requests should be acceptable or imperceptible

I guess you have to wait for confirmation from the server before you can proceed with the next operation (such as payment, etc.)
if your server takes too long to react, you can use the request generation task id and then use the task id to query whether the task is completed

.

javascript itself is single-threaded and needs to be executed step by step. The meaning of ajax is asynchronous calls and local refreshes, which can save time and enhance the user experience. If you want to solve the problem of fake death while emphasizing Synchronize, this problem cannot be solved
, but very often we only call UI to render when the data is returned, that is, to render UI, in success. Before that, we used loading mini animation to improve the user experience

. I don't think this is a technical problem, it should be a product problem.
users feel stuck, or in terms of user experience, the page does not respond, in the final analysis, because the page does not provide timely and effective feedback on the user's actions. For example, if you move a large file on a computer, both windows and macos, will display a "moving" or similar status prompt when moving, and the user will know, Oh, it's working, and everything's fine. If there is no such hint, the user finishes the operation, the wind is calm, and the file is not in the past, what can the user think? The computer "jam" is dead.
back to the question, I think if the result of this Ajax has a great impact on the view layer, then you can get a mask to hide the view layer, and for a better experience, you can add a prompt of "please wait a moment while loading", and the cancel button, so it's not worth abolishing the asynchrony for this (there is no Synchronize in js, so the implementation can only be blocking).

Previous: How does FastReport.Net export another value?

Next: How to write to the dist folder after npm start and then execute build?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37b4f-40641.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37b4f-40641.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?