setTimeout

1
2
3
4
5
6
7
8
9
10
// start-end-setTimeout
function f() {
    console.log('start');
    setTimeout(() => {
        console.log('setTimeout');
    });
    console.log('end');
}

f();

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// start-promise1-promise2-end-then-setTimeout
function f1() {
    console.log('start');
    new Promise((resolve, reject) => {
        console.log('promise1');
        resolve();
        console.log('promise2');
    }).then(() => {
        console.log('then')
    });
    setTimeout(() => {
        console.log('setTimeout')
    });
    console.log('end');
}

f1();

Async/Await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// start async2-1-1 async2-2-1 end async2-1-2
function f2() {
    console.log('start');
    async function f2_1() {
        console.log('async2-1-1');
        await f2_2();
        console.log('async2-1-2')
    }
    async function f2_2() {
        console.log('async2-2-1');
    }
    f2_1();
    console.log('end');
}

f2();

Promise setTimeout Async/Await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// start 
// promise
// promise-resolve-then
// async3-1-1
// async3-2 
// end 
// promise-resolve 
// async3-1-2 
// setTimeout
function f3() {
    console.log('start');
    async function f3_1() {
        console.log('async3-1-1');
        await f3_2();
        console.log('async3-1-2')
    }

    setTimeout(()=>{
        console.log('setTimeout');
    });

    new Promise((resolve,reject)=>{
        console.log('promise');
        resolve();
        console.log('promise-resolve-then');
    }).then(()=>{
        console.log('promise-resolve');
    });

    async function f3_2() {
        console.log('async3-2');
    }
    f3_1();
    console.log('end');
}

f3();