New skills to live! The significance of fancy use of asynchronous functions in front-end tables

background

In the 1960s, the independent operating unit in the operating system was usually a process. However, with the development of computer technology, people have found that creating, revoking, and switching a process will cost a lot of time and space.

In the 1980s, in order to solve this problem, a smaller independent operation basic unit-thread appeared.

The operating system divides the CPU processing time into many smaller time slices, executes the instructions of one thread in each independent time slice, and continues to execute the instructions of the next thread in the next time slice. Each thread executes in turn, because each time slice The time is relatively short, all threads will run, to the user, it is as if all threads are running at the same time. The final result is that multiple threads can be created during programming and run at the same time, and each thread can run "parallel" to complete different tasks.

At this time, a new problem also arises. In the operating mode of a separate thread, when a piece of code calls another piece of code, only synchronous calls can be used. Only after the current code is executed and the result is returned, the call can continue to execute. An example is that there is only one water tank, and a horse can only drink water after the horse has left.

With the support of multi-threading, asynchronous function calls can be used, and this problem can be easily solved.

Introduction to the principle of asynchronous functions

There will be a lot of content in the program, the calculation content is complicated, the rendering content is various, and it takes a lot of time in the processing process. When a certain module A calls the processing content of module B, then the content in module B needs some time to process. At this time, if module A keeps waiting, it will seriously affect the performance of the program. In actual situations, for example, data processing that needs to be filled online in the front-end page, the data content needs to be calculated and then displayed in a table. This is because the calculation has not been completed and the page content is not displayed, which brings users The feeling is that the content is clicked to run, but there is no feedback on the page for a long time.

After the asynchronous function is called, the module A and module B that are executed at this time belong to different threads.

In an asynchronous call, module A does not need to wait for module B to return content before continuing to execute the subsequent code.

After the content in module B is executed, module A will be notified: I have completed the processing here, so remember to deal with the follow-up content.

With the help of asynchronous calls, the display problem in the front-end page we just mentioned can be optimized: the entire initialization process is put into a separate thread, and the main thread starts this thread and then goes down, so that the main window is displayed instantly. When thinking about the content of the operation that needs to be performed, the data calculation processing has been processed in secret; after the program starts to run stably, asynchronous calls can further optimize the process of human-computer interaction. When the user clicks the mouse to operate, the operation content is time-consuming, and the system does not respond immediately after clicking, which makes the user's experience very bad. Turn the more time-consuming and slower operation content into asynchronous calls, and let the main thread wait for the next message at any time, so that the user's mouse operation action responds faster, and the user experience is naturally greatly improved.

Practice: Fancy use by expert users

Example demonstration

Let's use a simple example to see how to use asynchronous functions in front-end spreadsheet cell calculations.

var ServerDecode = function () {};
ServerDecode.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("DECODE", 1, 255);
ServerDecode.prototype.evaluateAsync = function (context, arg1) {
    $.get("decode/" + arg1, function (data, status) {
        context.setAsyncResult(data);
    });
};

spread.addCustomFunction(new ServerDecode());

sheet.setFormula(0, 1, '=DECODE(A1)');

In this algorithm, we put the part of the calculation and analysis method set on the server, and the method name is DECODE

The next step is to send the parameters to the server with jquery.get request, and then complete the setting after obtaining the request content

Then register the entire asynchronous function into Spread

Finally, in cell B1, enter DECODE(A1)

In this way, when the content of A1 cell changes, B1 will be recalculated into the corresponding content according to the calculation rules we set

Fancy use of asynchronous functions

Tools are always being used by different people to discover a variety of uses, and last winter we received feedback from users of various wonderful uses of asynchronous functions.

They use the parameters of the asynchronous function to form a SQL, send it to the database for data query, and display the query result after the query is completed. It turned out that everything was correct, but there was a small problem.

During the use process, the user found that the query exceeded four times in the whole process, and asked us whether the formula is wrong?

We immediately carried out troubleshooting. In the process of viewing the source code, we found that in order to emphasize the importance of data when implementing this function at the earliest, when there are multiple asynchronous function calls in the same formula, we still calculate the next content again. The content of the asynchronous function that has been calculated will be calculated again.

Unexpectedly, users would actually use asynchronous functions in this way, and this part of the content was subsequently adjusted as a whole. It has been adjusted to only calculate the asynchronous function once per call.

With this experience, and then encountering other fancy usages of asynchronous functions by users, we are not surprised.

Sure enough, it didn't take long to receive fancy usage feedback from other users.

This time the user uses an asynchronous function to get the current service name from the server and displays it in SpreadJS.

We found that the user also added a format string to obtain the user's QR code. At the same time, the conditional format is also set here, if the user is not logged in, an error message will be displayed.

Although the content of this example is short, here the user combines the three functions of asynchronous function, condition, format, and format string.

Summarize

The above is all our background and principles of the birth of asynchronous functions, as well as the use of asynchronous functions in the front-end spreadsheet and the fancy use of various fairy users. By this section, the entire content of the calculation principle of spreadsheets has been introduced.

I think the content is good, just like it before leaving~