js異步從入門到放棄(實踐篇) — 常見寫法&面試題解析

時間 2019-11-09

標籤異步入門放棄實踐常見寫法面試解析欄目 JavaScript 简体版

原文原文鏈接

前文

該系列下的前幾篇文章分別對不一樣的幾種異步方案原理進行解析，本文將介紹一些實際場景和一些常見的面試題。(積累不太夠，後面想到再補)面試

正文

流程調度(schedule)

流程調度，最多見的就是繼發和併發（或者說串行和並行）兩種類型，在平常工做裏都很常見。接下來結合實際場景進行說明：segmentfault

1. 串行執行一系列異步操做，每一步依賴前一步的結果

串行執行的關鍵是，將每個異步任務放到前一個異步任務的回調函數裏執行。promise

場景：一串連續的動畫，每一個動畫必須等待前一個動畫徹底執行完，而且若是某個動畫執行失敗，則不繼續執行下一個動畫。
代碼：

// 這裏假定一共要執行5個動畫 
    
    // getAnimation 函數模擬執行動畫 接收參數i表述動畫編號 返回一個promose
    const getAnimation = (i) => new Promise((resolve, reject) => {
        setTimeout(()=>{
            // 隨機返回true或者false 
            const isSuccess = Math.random() > 0.5
            console.log(`第${i}個動畫執行`)
            if(isSuccess){
                return resolve(isSuccess)
            }
            return reject(isSuccess)
        },1000)
    })

    // 1.promise實現 核心就是嵌套代碼
    const serialScheduleByPromise = () => {
        let p = Promise.resolve(true)
        const tasks = []
        for(let i=0;i < 5; i++){
            p = p.then(isSuccess=>{
                if(isSuccess){
                    return getAnimation(i+1)
                }
            }).catch((err)=>{
            return console.log(`執行失敗`)
        })
        }
    }
    serialScheduleByPromise()

    // 2.async/await實現
    const serialScheduleByAsync = async () => {
        try{
        for(let i=0;i < 5; i++){
            await getAnimation(i+1)
        }}catch(e){
            console.log(`執行失敗`)
        }
    }
    serialScheduleByAsync()

async/await的語法雖然沒有單獨解析，可是本質就是前一篇介紹的帶自動執行器的generator而已，所以再也不贅述
能夠看到，async的寫法代碼更簡潔，並且邏輯更清晰，可讀性更強。瀏覽器

2. 並行執行全部異步操做，等到全部請求完成後，按照讀取請求的順序輸出結果

場景：併發讀取5個數據（爲了方便分別編號爲1-5），而後按照實際讀取順序結果併發

const getDataById = (i) => new Promise((resolve, reject) => {
        // 隨機延遲一個時間返回結果，
        const delay = Math.floor(Math.random() * Math.floor(3000)) // 延遲時間可能爲 0，1000，2000 毫秒
        setTimeout(()=>{
            return resolve(i)
        }, delay)
    })
    
    // 1.promise實現
    const concurrentScheduleByPromise = ()=>{
        const promises = []
        const result = []
        for(let i = 0;i < 5;i++){
            promises[i] = getDataById(i+1)
            promises[i].then(i=>{
                result.push(i)
            })
        }
        Promise.all(promises).then(()=>{
            result.forEach(id=>{
                console.log(id)
            })
        })
    }
    concurrentScheduleByPromise()

    // async/await實現
    const concurrentScheduleByAsync = () => {
        for(let i = 0 ;i < 5; i++){
            let task = async function (){
                console.log(await getDataById(i+1))
            }
            task()
        }
    }
    concurrentScheduleByAsync()

注意辨析這裏concurrentScheduleByAsync和serialScheduleByAsync的區別，關鍵點是同一個async函數內部的await纔是按順序執行。dom

流程調度裏比較常見的一種錯誤是「看似串行」的寫法，能夠感覺一下這個例子:異步

const getPromise = (name) =>new Promise(resolve=>{
        setTimeout(()=>{
            console.log(name)
            resolve(name)
        },1000)
    })
    
    // 判斷如下幾種寫法的輸出結果 
    Promise.resolve().then(getPromise('1a')).then(getPromise('1b')).then(getPromise('1c')) 
    Promise.resolve().then(()=>getPromise('2a')).then(()=>getPromise('2b')).then(()=>getPromise('2c')) 
    Promise.resolve().then(getPromise('3a').then(getPromise('3b').then(getPromise('3c')))) 
    Promise.resolve().then(()=>getPromise('4a').then(()=>getPromise('4b').then(()=>getPromise('4c'))))

辨別輸出順序

這類題目通常出如今面試題裏。async

1. 基礎-區分不一樣任務類型

console.log(1)
    new Promise(resolve => {
        console.log(2)
        setTimeout(() => {
            console.log(10)
        }, 10)
        resolve()
        console.log(3)
    }).then(() => {
        console.log(5)
    })

    setTimeout(() => {
        console.log(7)
        Promise.resolve().then(() => {
            console.log(9)
        })
        console.log(8)
    })

    Promise.resolve().then(() => {
        console.log(6)
    })
    console.log(4)
    // 輸出 1 2 3 4 5 6 7 8 9 10

2. 複雜-加入瀏覽器render

<style>
    .outer {
        padding: 30px;
        background-color: aqua;

    }

    .inner {
        height: 100px;
        background-color: brown;
    }
</style>

<body>
    <div class="outer">outer
         <div class="inner">inner</div> 
    </div>
</body>
<script>
    var outer = document.querySelector('.outer');
    var inner = document.querySelector('.inner');

    // Let's listen for attribute changes on the
    // outer element
    new MutationObserver(function () {
        console.log('mutate');
    }).observe(outer, {
        attributes: true
    });

    // Here's a click listener…
    function onClick() {
        console.log('click');

        setTimeout(function () {
            console.log('timeout');
        }, 0);

        Promise.resolve().then(function () {
            console.log('promise');
        });

        outer.setAttribute('data-random', Math.random());
    }

    // …which we'll attach to both elements
    inner.addEventListener('click', onClick);
    outer.addEventListener('click', onClick);
    // innner.click() 試試直接點擊和js執行click的區別
</script>

這類問題實質上就是辨析異步任務隊列類型，詳細內容和解析能夠直接看js異步從入門到放棄（三）- 異步任務隊列(task queues)。函數