Event loop mechanism

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u012193330/article/details/68942008

We know that a major feature of JavaScript is single-threaded, and this thread has only one event loop. JavaScript code execution, a function call stack in addition to their execution order to get the function, but also rely on a task queue (task queue) to get perform some additional code.

Queue data structure

1. A thread, the event loop is unique, but the task can have multiple queues.
2. Task queue is divided into macro-task (macro task) and micro-task (micro tasks), in the latest standards, they are referred to as task and jobs.
3. macro-task presumably comprising: script (whole codes), setTimeout, setInterval, setImmediate, I / O, UI rendering.
4. micro-task includes approximately: process.nextTick, Promise, Object.observe (obsolete), MutationObserver (html5 new features)
5. setTimeout / Promise and so we call the task source. Into the task queue is their assigned specific tasks.
6. Sequence macro task execution queue: script (overall Code) -> setTimeout (setInterval homology) -> setImmediate
   execution sequence of micro task queue: process.nextTick-> Promise (then)

SetTimeout to perform a task, it is still done by means of a function call stack, and encounters a task dispatcher when the task will be distributed to the corresponding queue.

SetTimeout only after all the tasks finished, will again begin micro-task queue. And clear all executable micro-tasks.

After generating micro setTiemout queue task is completed, then loop back to begin setImmediate queue. It is still the task execution queue setImmediate finished first, and then perform micro tasks generated.

When the queue the generated execution setImmediate micro perform all tasks, the second round of the cycle is over.

We need to note the end of the cycle time node here.
When we encountered in the implementation of setTimeout setTimeout task, it will still be distributed to setTimeout corresponding task queue to go, but the task would have to wait until the next round of the event loop is executed. Case did not involve such a complicated nesting, we can begin to add or modify their position to feel the change cycle.

Example1:

console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

Example2:

setTimeout(function() {
    console.log(1);
    setTimeout(function() {
        console.log(2);
    }, 0);
    process.nextTick(function() {
        console.log(5);
        process.nextTick(function() {
            console.log(6);
        });
    });
}, 0);
process.nextTick(function() {
    console.log(3);
    process.nextTick(function() {
        console.log(4);
    });
    setTimeout(function() {
        console.log(7);
    }, 0);
});

Results: 3,417,562

Reference article: http://www.jianshu.com/p/12b9f73c5a4f