Detailed explanation of JS asynchronous programming examples

The execution environment of JS language is "single-threaded". Why does asynchronous programming occur?

Single thread means that only one task can be completed at a time. If there are multiple tasks, they must be queued and wait until the previous task is completed before the next task can be executed.

Two task execution modes: synchronous and asynchronous
"Asynchronous mode":
The callback function is the most basic method of asynchronous programming. Each task has one or more callback functions. After the previous task is executed, the next task is not executed, but the callback function is executed. The latter task is executed before the previous task is finished, so the execution order of the program is consistent with the task. The sort order is inconsistent and asynchronous.
4 methods of asynchronous programming:

1. Callback function
This is the most basic method of asynchronous programming.
Assume that there are two functions f1 and f2, and the latter waits for the execution result of the former.
If f1 is a time-consuming task, you can write f2 as the callback function of f1.

function f1(callback){ 

  setTimeout(function(){ 

  //f1的任务代码 

  callback(); 

  },1000); 

  }

Copy after login

Execution code

f1(f2)
The advantage of using this method is that it is simple and easy to understand and deploy. The disadvantage is that it is not conducive to reading and maintaining the code. The various parts are highly coupled, the process will be very confusing, and only one callback function can be specified for each task.

2. Event monitoring
Adopt event-driven mode. The execution of a task does not depend on the order of the code, but on whether an event occurs.
First, bind an event to f1 (using jQuery writing method).

f1.on(‘done’,f2); 

  //当f1发生done事件，就执行f2。然后对f1进行改写：

Copy after login

is as follows:

fuction f1(){ 

  setTimeout(function(){ 

  //f1的任务代码 

  f1.trigger(‘done’); 

  },1000); 

  }

Copy after login

f1.tigger('done') means that after the execution is completed, the done event is triggered immediately to start execution. f2.
The advantages of this method are: it is easy to understand, can bind multiple events, each event can specify multiple callback functions, and can be decoupled, which is conducive to modularization.
Disadvantages: The entire program must become event-driven, and the running process will become very unclear.

Related recommendations:

Introduction to 4 methods of Javascript asynchronous programming

Detailed explanation of callback functions and manager usage examples of javascript asynchronous programming

Introduction to Javascript asynchronous programming methods

The above is the detailed content of Detailed explanation of JS asynchronous programming examples. For more information, please follow other related articles on the PHP Chinese website!