Promise正如它的中文意思“承諾”一樣，保存著未來(lái)會(huì)發(fā)生事件（一般為異步操作）。Promise避免了“回調(diào)地獄”，寫(xiě)法更加接近同步操作。說(shuō)到同步，我更加喜歡async、await，它們書(shū)寫(xiě)更貼近同步操作。

圖片加載往往是異步的，如果有操作需要等到所有的圖片加載完之后再執(zhí)行，這時(shí)候就需要不斷的監(jiān)聽(tīng)所有圖片的加載情況。

ES5

利用ES5實(shí)現(xiàn)多圖預(yù)加載，可以通過(guò)計(jì)數(shù)器判斷有多少圖片加載完成。

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 count = 0,    
    imgs == = (++&&=

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

ES6

ES6原生提供了Promise對(duì)象，接下來(lái)用Promise改寫(xiě)上面的代碼。

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

    // 預(yù)處理圖片    function preLoadImg(source){
        let pr = [];        source.forEach(url => {// 預(yù)加載圖片
            let p = loadImage(url)
                    .then(img => this.images.push(img))
                    .catch(err => console.log(err))
            pr.push(p);
        })        // 圖片全部加載完        Promise.all(pr)
                .then(() => {
                    // do sth
                });

    }    // 預(yù)加載圖片
    function loadImage(url) {        return new Promise((resolve, reject) => {
            let img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        })
    }

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開(kāi)發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

Promise實(shí)際上是將回調(diào)操作獨(dú)立出來(lái)，當(dāng)Promise狀態(tài)從pending（進(jìn)行中）改為resolved（已完成），then注冊(cè)的函數(shù)就會(huì)被執(zhí)行，如果狀態(tài)從pending改為rejected（已失?。?，就會(huì)被catch捕獲。

這里想Promise.all傳入了一個(gè)Promise數(shù)組，數(shù)組中的Promise狀態(tài)均為resolved，Promise.all的狀態(tài)才會(huì)是resolved，否則Promise.all的狀態(tài)為rejected。也就是說(shuō)，當(dāng)所有圖片加載完成后，才會(huì)執(zhí)行then中的函數(shù)。為了防止有圖片加載失敗，阻塞后續(xù)操作，為每一個(gè)p添加catch，捕獲reject，Primise.all就接受不到了。

 

http://www.cnblogs.com/xxhuan/p/6974181.html