Event Loop mechanism

Source: Internet
Author: User

One of the things we know about JavaScript is the single thread, which has only one event loop in it. During the execution of JavaScript code, in addition to relying on the function call stack to handle the execution order of functions, the task queue is also relied upon to handle other code execution.

Queue data structure in one thread, the event loop is unique, but the task queue can have multiple. Task queues are divided into Macro-task (macro tasks) and Micro-task (micro-tasks), which, in the latest standard, are called task and jobs respectively. Macro-task probably includes: script (whole code), settimeout, SetInterval, setimmediate, I/O, UI rendering. Micro-task probably include: Process.nexttick, Promise, Object.observe (OBSOLETE), Mutationobserver (HTML5 new features) settimeout/ Promise and so on we call the task source. And the task queues are the specific tasks they specify. Execution order of macro task queues: script (overall code)->settimeout (SetInterval homology)->setimmediate
Order of execution of the micro-task queues: process.nexttick->promise (then)

The execution of the settimeout task is still done with the function call stack, and tasks are distributed to the corresponding queues when the task dispatcher is encountered.

The execution of a micro-task queue is performed only once all the tasks in settimeout have been completed. and empty all the executable micro-tasks.

After the settiemout queue has finished executing the micro task, the loop returns to the execution of the setimmediate queue. Still, the tasks in the Setimmediate queue are completed before the resulting micro task is executed.

When the Setimmediate queue executes the resulting micro-tasks, the second-round loop is over.

You need to pay attention to the time node at the end of the loop here.
When we encounter settimeout in the execution of the settimeout task, it still distributes the corresponding task to the settimeout queue, but the task waits until the next round of event loop executes. The example does not involve such a complex nesting, you can add or modify their position to feel the cycle of change.

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 (' Glob
1_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 4 1 7 5 6 2

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.