promise結(jié)合requestAnimationFrame用法
freedom 攝影作品?冬日里的花朵
promise基礎(chǔ)用法
js為了解決單線程的異步執(zhí)行問題，引入了事件循環(huán)隊(duì)列體系，這個體系里的隊(duì)列中都是一個個排著隊(duì)等待執(zhí)行的宏任務(wù)，settimeout就是一個宏任務(wù)，promise是典型的微任務(wù)，微任務(wù)概念是相對宏任務(wù)而言的，可以把微任務(wù)理解為宏任務(wù)中的隊(duì)列。因?yàn)楹耆蝿?wù)是按序執(zhí)行，所以如果當(dāng)前宏任務(wù)有微任務(wù)，只有等當(dāng)前宏任務(wù)的所有微任務(wù)執(zhí)行完畢，才會執(zhí)行下一個宏任務(wù)。所以promise與settimeout不分前后緊挨著出現(xiàn)在代碼里，那一定是先執(zhí)行完promise的回調(diào)才會去執(zhí)行settimeout。這里有一個例子：
setTimeout(()=>console.log("d"),?0)
var?r?=?new?Promise(function(resolve,?reject){
?????resolve()
});
r.then(()?=>?{?
??var?begin?=?Date.now();
??while(Date.now()?-?begin???console.log("c1")?
??new?Promise(function(resolve,?reject){
????????resolve()
??}).then(()?=>?console.log("c2"))
});
//?c1?c2?d
輸出順序是c1、c2、d，settimeout后面緊接著一個promise，那得先執(zhí)行promise，在promise的then回調(diào)中，先強(qiáng)行等了一秒鐘，輸出c1后又執(zhí)行了一個微任務(wù)；這一套動作走完了，最后才回頭執(zhí)行了settimeout。這個例子能很好地說明promise(微任務(wù))與settimeout(宏任務(wù))的關(guān)系。
promise結(jié)合requestAnimationFrame
promise在項(xiàng)目中會有各種應(yīng)用場景，但是promise結(jié)合requestAnimationFrame的用法比較少見，我在項(xiàng)目中正好遇到這種需求了。
先介紹下requestAnimationFrame，它常常用來寫動畫，相比setInterval、 settimeout這些更加精確而且性能更好。前面在介紹promise的時候說到宏任務(wù)與微任務(wù)的概念，requestAnimationFrame也是一種宏任務(wù)。
現(xiàn)在的需求就是要在一個動畫結(jié)束之后再調(diào)用另一個函數(shù)，這個過程可以簡單形象地理解為“圖窮匕首見”。
理解requestAnimationFrame
先從mdn 摘個動畫的代碼，理解下requestAnimationFrame的用法：
'alimate'?style="background-color:?brown;?width:?100px;height:?100px;"> 我在這上面加了點(diǎn)代碼，可以直接看到效果。這個官方例子非常值得研究，這是我摘抄的原因，有幾點(diǎn)要說明下：
- step函數(shù)的參數(shù)timestamp是有值的，它是一個double類型的十進(jìn)制數(shù)，表示當(dāng)前回調(diào)函數(shù)step被調(diào)用的時間
- 兩秒后取消動畫，動畫之所以停止，只不過是兩秒后，沒有再觸發(fā)回調(diào)step了
- 要想取消回調(diào)，可以用cancelAnimationFrame，它的參數(shù)是requestAnimationFrame的返回值
后面有時間可以研究下requestAnimationFrame的垃圾回收，如果在上面的代碼中不加條件限制，這個持續(xù)動畫對性能的影響是個值得研究的問題。
結(jié)合promise與requestAnimationFrame
結(jié)合上文來看，requestAnimationFrame是一個宏任務(wù)，那在promise中寫一個宏任務(wù)，這事我們經(jīng)常做，就像這樣：
var?f?=?new?Promise((resolve,?reject)?=>?{
??console.log('a')
??setTimeout(resolve,100);
})
f.then(()?=>?{?console.log('res')?})
那套用到requestAnimationFrame也是一樣的，結(jié)合上面的用法示例，我們可以這樣寫：
'alimate'?style="background-color:?brown;?width:?100px;height:?100px;"> 需要注意的是，這個promise里面的主體，其實(shí)是一個requestAnimationFrame函數(shù)，模型可以簡單寫成這樣：
new?Promise((resolve,?reject)?=>?{
??requestAnimationFrame(f)
}).then()
問題的關(guān)鍵就是回調(diào)函數(shù)f要寫在哪里??？如果寫在promise之外，在動畫結(jié)束，需要觸發(fā)promise的回調(diào)時，就有問題了，看代碼：
new?Promise((resolve,?reject)?=>?{
??requestAnimationFrame(f)
}).then()
function?f?()?{
???//?動畫結(jié)束之后，如何觸發(fā)resolve
}
據(jù)我了解的，resolve只能在promise內(nèi)部調(diào)用，而Promise.resolve的用法，只適合去封裝異步函數(shù)，在這種情況下，最好就是像我那樣寫，把requestAnimationFrame和它的回調(diào)函數(shù)都封裝在promiset中，等待時機(jī)成熟就調(diào)用resolve就可以了。
如果非要寫在外面也是有辦法的，把resolve當(dāng)作參數(shù)傳出去，不過要注意的是resolve必須是第二個參數(shù)：
'alimate'?style="background-color:?brown;?width:?100px;height:?100px;"> <b id="afajh"><abbr id="afajh"></abbr></b>