About asynchronous execution of js and about asynchronous execution of js

About asynchronous execution of js and about asynchronous execution of js

1. The execution environment of the Javascript language is "single thread ):

Advantages: The implementation is relatively simple, and the execution environment is relatively simple;

Disadvantage: As long as a task takes a long time, the subsequent tasks must be queued up and will delay the execution of the entire program. Common browsers do not respond (false), because a Javascript code runs for a long time (such as an endless loop), the entire page is stuck in this place, and other tasks cannot be executed.

To solve this problem, the Javascript language divides the task execution mode into two types: Synchronous and Asynchronous ).

2. "asynchronous mode" programming methods:

(1) callback function:The advantage is that it is simple, easy to understand, and easy to deploy. The disadvantage is that it is not conducive to the reading and maintenance of code, and each part is highly coupled (Coupling ), this makes the program structure messy and the process difficult to trace (especially when the callback function is nested), and each task can only specify one callback function.

(2) event-driven mode (event listening ):The advantage is that it is easy to understand. You can bind multiple events, specify multiple callback functions for each event, and "Decoupling" is supported to facilitate modularization. The disadvantage is that the entire program will become event-driven, and the running process will become unclear.

(3) Observer mode (publish/subscribe mode ):This method is similar to "event listening", but is superior to the latter. Because we can view the message center to know how many signals exist and how many subscribers each signal has, so as to monitor the program running.

3. Process Control for asynchronous operations.

(1) serial execution:Write a process control function to control asynchronous tasks. After a task is completed, execute another one.

var items = [ 1, 2, 3, 4, 5, 6 ];var results = [];function series(item) { if(item) {  async( item, function(result) {   results.push(result);   return series(items.shift());  }); } else {  return final(results); }}series(items.shift());

Function series is a serial function that executes asynchronous tasks in sequence. final functions are executed only after all tasks are completed. The items array stores the parameters of each asynchronous task, and the results array stores the running results of each asynchronous task.

(2) parallel execution:All asynchronous tasks are executed at the same time. The final function is executed only after all tasks are completed.

// The forEach method will initiate six asynchronous tasks at the same time, and the final function will be executed only after all of them are completed. Var items = [1, 2, 3, 4, 5, 6]; var results = []; items. forEach (function (item) {async (item, function (result) {results. push (result); if (results. length = items. length) {final (results );}})});

The advantage of parallel execution is high efficiency, which saves time compared to sequential execution of only one task at a time. However, if there are many parallel tasks, it is easy to exhaust system resources and slow down the running speed. Therefore, there is a third process control method.

(3) combination of parallelism and serial:Set a threshold. Up to n asynchronous tasks can be executed in parallel at a time. This avoids Overconsuming system resources.

// The variable running records the number of currently running tasks. If the value is lower than the threshold, start a new task. // if the value is 0, all tasks are completed, in this case, the final function // can only run two asynchronous tasks simultaneously. Var items = [1, 2, 3, 4, 5, 6]; var results = []; var running = 0; var limit = 2; function launcher () {while (running <limit & items. length> 0) {var item = items. shift (); async (item, function (result) {results. push (result); running ++; if (items. length> 0) {launcher () ;}}); running --; if (running == 0) {final ();}}}

The above is all about asynchronous execution of js. I hope you can provide more support ~