JavaScript events enforcement mechanisms

Because javascript is 单线程and can only run on the main thread JS engine, you can only js code line by line execution, can not perform multiple tasks at the same time js code, which led to if there is a lengthy calculation or a ajax request etc. IO operation, if there is no asynchronous, there will be a long wait for the user, and because of the current task is not yet complete, so this time, all other operations will not respond.

js just beginning to deal with some form validation and DOM manipulation is created, it is primarily for light-weight and simple use of language 单线程patterns. 多线程模型Compared 单线程to a lot of complexity, such as multiple threads need to deal with inter-thread sharing of resources, but also to solve the state synchronization issues.

JavaScript events enforcement mechanisms:

When the JS parsing execution, the engine will be divided into two tasks, 同步任务（synchronous） and  异步任务（asynchronous）。for synchronizing tasks, will be pushed to the execution stack in order to carry out these tasks. For asynchronous task, when it can be executed, it will be placed in a  任务队列（task queue） waiting JS engine to execute. When the execution stack all the synchronization task is completed, JS engine will go to the task queue to see if there exists the task, and the task to carry into execution stack, execution will go over the task queue to see if there may have been executed task. This cycle checking mechanism is called 事件循环(Event Loop). 任务队列也It is divided into  微任务（microtask）队列 & 宏任务（macrotask）队列。

Event Loop complete execution order is:

First, in the task execution stack.

After emptying the execution stack, the micro-check task (Microtask) queues, all tasks executable micro performed.

Take macrotask (macrotask) first execution queue.

Back to the second step.

Note: The full implementation of each task queue micro, macro task execution queue is a time to take one.

the setTimeout (() => { 
    the console.log ( ' I am the first macro task ' ); 
    Promise.resolve () the then ((). => { 
        the console.log ( ' first task in the first macro I a micro-task ' ); 
    }); 
    . Promise.resolve () the then (() => { 
        the console.log ( ' I am the first task in the second macro micro task ' ); 
    }); 
}, 0 ); 

the setTimeout (() => { 
    the console.log ( ' I'm a second macrotask ' ); 
}, 0 ); 

Promise.resolve (.) the then (() => {
    the console.log ( ' I am the first micro-task ' ); 
}); 

the console.log ( ' perform synchronization tasks ' );

The final results of the implementation are:

// perform synchronization tasks
 // I am the first micro-task
 // I was the first macro task
 // I was the first macro task in the first micro-task
 // I was the first task in the macro The second micro-tasks
 // I was the second macro task

Common Asynchronous mode: callback function; event listener; publish / subscribe model (also known as the observer pattern); promise; Generatorfunction; ES7 inasync/await。

Callback:

Asynchronous operation callback function is the most basic method, there is such an asynchronous operation (asyncFn), and a synchronous operation (normalFn). If the normal mechanisms of JS processing, the synchronization must occur before the induction. as follows:

function asyncFn() {
    setTimeout(() => {
        console.log('asyncFn');
    }, 0)
}

function normalFn() {
    console.log('normalFn');
}

asyncFn();
normalFn();

// normalFn
// asyncFn

If I want to change the order, you can use callback manner:

function asyncFn(callback) {
    setTimeout(() => {
        console.log('asyncFn');
        callback();
    }, 0)
}

function normalFn() {
    console.log('normalFn');
}

asyncFn(normalFn);

// asyncFn
// normalFn

Event Monitor: This is an event-driven mode, perform asynchronous tasks do not depend on the order code, but on whether an event occurred. For example, trigger this event by clicking a button or trigger way.

Publish / Subscribe mode (also known as the observer pattern):