In fact, I have never thought about this issue before, but it was only recently that I stepped on the pit, and I understood these things. Next, I will briefly talk about it for you.
First of all, let's briefly introduce the concepts of synchronous, asynchronous and callback functions, so as to help you quickly understand the problem
-
Synchronization: When a call is made, the call does not return until the result is obtained; once the call returns, the return value is obtained. In other words, it is up to the caller to actively wait for the result of this call.
-
Asynchronous: After the call is issued, the call returns directly, so no result is returned. When an asynchronous procedure call is issued, the caller does not get the result immediately. Instead, after the call is issued, the callee allows the caller to respond to the result through status, notification or callback function.
-
Callback function: The main function passes the function to other codes through parameters, a reference to a certain block of executable code. To put it simply, the returned data after a function is executed is passed to the main function in the form of parameters.
Then enter the main course and talk about the problems I encountered at the time.
Problem Description:
There are two statements in js, the first one is the loading control, which is to display the loading style animation; the second one is an asynchronous method, and there is an alert pop-up window in the callback function. When I executed it, I found a problem, that is, the loading animation always waits for a few seconds after the completion of the asynchronous method call before displaying the loading animation and popping up the alert pop-up window, almost at the same time. This definitely does not meet my needs. My initial idea was to display the loading animation to prompt the user to wait when calling the background interface asynchronously, instead of displaying the loading animation after the adjustment is completed, which would be meaningless.
problem analysis:
At first I didn’t understand what was going on, so I was very confused. At first I thought it was a code problem, but later I still didn’t have any thoughts, so I asked someone else, and the boss told me that js itself is single-threaded. Only one task can be executed. My problem is that the loading animation and the asynchronous method are executed too fast. Although the line of code that loads the animation is executed, it needs to compete with the asynchronous callback alert pop-up window for CPU resources when it is displayed. Normally, it is According to the fact that you use the CPU for a while, I use the CPU for a while, which causes the last two controls to be displayed almost at the same time, which is almost the same reason.
problem solved:
After listening to it, I felt that I understood a lot of things in an instant, and then used a setTimeout()function to delay calling the asynchronous method by 100 milliseconds, and the problem was solved immediately.
But then there is another problem, because the asynchronous function can actually be understood as opening a single thread to execute. After it is executed, it will not call back immediately, but will pass the result to the callback function after the processing is completed. Calling it asynchronously will not affect the previous code, but if the subsequent code has a flag field of the callback function, for example, if the execution is successful, the callback function will update the value of the flag field. But after calling the asynchronous function, it will immediately continue to execute the code. Both synchronous and asynchronous can have callback functions, but now there are generally more asynchronous callbacks. If it is synchronous, it will wait for the execution of this function to end before executing it downwards, so the value of the flag field below will not be affected. Asynchronous means that after executing the function, it executes directly downwards, and does not wait, so this is the case. The flag field we put in the callback may not have been assigned yet. The following code for judging the bit of the flag field is actually a problem.
In fact, there are many solutions to this kind of problem. For example, you can poll to determine whether the flag bit has been assigned. After the assignment, you can end the polling and execute downward; or put the following operations in the callback and execute After completing the original operation in the callback, directly execute the following code, which is more convenient, and there is no need to make a separate polling judgment, so the problem will be solved.
The problem is such a problem, the thing is such a thing, and I have learned new knowledge!