setTimeout、Promise、Async/Await 的區別

1.SetTImeout

    注意setTimeout是異步執行函數 , 當js主線程運行到此函數時,不會等待settimeout中的回調函數 ,會直接進行settimeout下面的語句(儘管setTimeout的延遲時間爲0時) 當執行完當前事件循環的時候,settimeout中的回調會在下次(或者某一個)事件循環中被執行

例子1:

console.log('setTimeout start');

setTimeout(function(){
    console.log('setTimeout execute');
})

console.log('setTimeout end ');

根據上面解釋 很清晰的可以判斷 上面例子的輸出結果爲 

setTimeout start => setTimeout end => setTimeout execute

2.Promise 

   Promise 本身是同步的立即執行函數,當在執行體中執行resolve()或者reject的時候,此時是異步操作
 會先執行then/catch(異步執行)等,等主棧完成後,纔會去執行resolve()/reject中的方法,

例子2:

    console.log('script start');
    var promise1 = new Promise(function (resolve) {
        console.log('promise1');
        resolve();
        console.log('promise1 end');
    }).then(function () {
        console.log('promise2');
    })

    setTimeout(function () {
        console.log('setimeout');
    })

    console.log('script end');

根據以上解釋: 主棧開始時從上到下執行,會先打印出 script start 遇到了promise函數,由於promise函數是同步立即執行函數,因此會立即執行方法體內的程序,打印出promise1,遇到了resolve()函數,跳過(會在then/catch之後執行) 打印 promise1 end.此時Promise()函數的執行 ,已經執行完畢, 主棧繼續下面語句,遇到settimeout時異步執行, 然後會執行 script end,結束 ,此時會執行下一個事件循環, 然後會打印出promise2,然後在打印出settimeout

因此輸出的結果爲 

script start => promise1 => promise1 end =>script end =>promise2 => settimeout

3.async/await

    async函數返回一個promise對象,當函數執行的時候,一旦遇到await就會先返回,等到觸發的異步操作完成(await的函數),在執行函數體後面的語句,可以理解爲,async讓出了線程,跳出了async函數體,因此await函數後的語句相當於在then回調中執行.

    await的含義爲等待，也就是 async 函數需要等待await後的函數執行完成並且有了返回結果（Promise對象）之後，才能繼續執行下面的代碼。await通過返回一個Promise對象來實現同步的效果。

例子3:

async function async1(){
        console.log('async1 start');//2
        await async2(); 
        //等待 async2()返回之後 再執行下面的語句 ,
        // 相當於將 console.log('async1 end')異步化了 相當於 console.log('async1 end')在then之後執行了

        console.log('async1 end')//5
    }
    async function async2(){
        console.log('async2')//3
    }

    //
    console.log('script start');//1
    async1();
    console.log('script end')//4

因此輸出爲:

script start->async1 start->async2->script end->async1 end