promise基礎(chǔ)用法

js為了解決單線程的異步執(zhí)行問題，引入了事件循環(huán)隊(duì)列體系，這個(gè)體系里的隊(duì)列中都是一個(gè)個(gè)排著隊(duì)等待執(zhí)行的宏任務(wù)，settimeout就是一個(gè)宏任務(wù)，promise是典型的微任務(wù)，微任務(wù)概念是相對(duì)宏任務(wù)而言的，可以把微任務(wù)理解為宏任務(wù)中的隊(duì)列。因?yàn)楹耆蝿?wù)是按序執(zhí)行，所以如果當(dāng)前宏任務(wù)有微任務(wù)，只有等當(dāng)前宏任務(wù)的所有微任務(wù)執(zhí)行完畢，才會(huì)執(zhí)行下一個(gè)宏任務(wù)。所以promise與settimeout不分前后緊挨著出現(xiàn)在代碼里，那一定是先執(zhí)行完promise的回調(diào)才會(huì)去執(zhí)行settimeout。這里有一個(gè)例子：

setTimeout(()=>console.log("d"), 0)
var r = new Promise(function(resolve, reject){
     resolve()
});
r.then(() => { 
		var begin = Date.now();
		while(Date.now() - begin < 1000);
		console.log("c1") 
		new Promise(function(resolve, reject){
        resolve()
		}).then(() => console.log("c2"))
});
// c1 c2 d

輸出順序是c1、c2、d，settimeout后面緊接著一個(gè)promise，那得先執(zhí)行promise，在promise的then回調(diào)中，先強(qiáng)行等了一秒鐘，輸出c1后又執(zhí)行了一個(gè)微任務(wù)；這一流程走完了，最后才回頭執(zhí)行了settimeout。這個(gè)例子能很好地說明promise(微任務(wù))與settimeout(宏任務(wù))的關(guān)系。

promise結(jié)合requestAnimationFrame

promise在項(xiàng)目中會(huì)有各種應(yīng)用場(chǎng)景，但是promise結(jié)合requestAnimationFrame的用法比較少見，我在項(xiàng)目中正好遇到這種需求了。

先介紹下requestAnimationFrame，它常常用來寫動(dòng)畫，相比setInterval、 settimeout這些更加精確而且性能更好。前面在介紹promise的時(shí)候說到宏任務(wù)與微任務(wù)的概念，requestAnimationFrame也是一種宏任務(wù)。

現(xiàn)在的需求就是要在一個(gè)動(dòng)畫結(jié)束之后再調(diào)用另一個(gè)函數(shù)，這個(gè)過程可以簡(jiǎn)單形象地理解為“圖窮匕首見”。

理解requestAnimationFrame

先從mdn 摘個(gè)動(dòng)畫的代碼，理解下requestAnimationFrame的用法：

<div id='alimate' style="background-color: brown; width: 100px;height: 100px;"></div>
<script>
const element = document.getElementById('alimate');
let start;
function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  //這里使用`Math.min()`確保元素剛好停在200px的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
  if (elapsed < 2000) { // 在兩秒后停止動(dòng)畫
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);
</script>

我在這上面加了點(diǎn)代碼，可以直接看到效果。這個(gè)官方例子非常值得研究，這是我摘抄的原因，有幾點(diǎn)要說明下：

• step函數(shù)的參數(shù)timestamp是有值的，它是一個(gè)double類型的十進(jìn)制數(shù)，表示當(dāng)前回調(diào)函數(shù)step被調(diào)用的時(shí)間
• 兩秒后取消動(dòng)畫，動(dòng)畫之所以停止，只不過是兩秒后，沒有再觸發(fā)回調(diào)step了
• 要想取消回調(diào)，可以用cancelAnimationFrame，它的參數(shù)是requestAnimationFrame的返回值

后面有時(shí)間可以研究下requestAnimationFrame的垃圾回收，如果在上面的代碼中不加條件限制，這個(gè)持續(xù)動(dòng)畫對(duì)性能的影響是個(gè)值得研究的問題。

結(jié)合promise與requestAnimationFrame

結(jié)合上文來看，requestAnimationFrame是一個(gè)宏任務(wù)，那在promise中寫一個(gè)宏任務(wù)，這事我們經(jīng)常做，就像這樣：

var f = new Promise((resolve, reject) => {
		console.log('a')
		setTimeout(resolve,100);
})
f.then(() => { console.log('res') })

那套用到requestAnimationFrame也是一樣的，結(jié)合上面的用法示例，我們可以這樣寫：

<div id='alimate' style="background-color: brown; width: 100px;height: 100px;"></div>
<script>
const element = document.getElementById('alimate');
let start;
var f = new Promise((resolve, reject) => {
		function step(timestamp) {
		  if (start === undefined)
		    start = timestamp;
		  const elapsed = timestamp - start;
		  //這里使用`Math.min()`確保元素剛好停在200px的位置。
		  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
		  if (elapsed < 2000) { // 在兩秒后停止動(dòng)畫
		    requestAnimationFrame(step);
		  }else {
				resolve()
			}
		}
		requestAnimationFrame(step);
})
f.then(() => {
		element.innerHTML= "動(dòng)畫結(jié)束了！";
})
</script>

需要注意的是，這個(gè)promise里面的主體，其實(shí)是一個(gè)requestAnimationFrame函數(shù)，模型可以簡(jiǎn)單寫成這樣：

new Promise((resolve, reject) => {
		requestAnimationFrame(f)
}).then()

問題的關(guān)鍵就是回調(diào)函數(shù)f要寫在哪里?。咳绻麑懺趐romise之外，在動(dòng)畫結(jié)束，需要觸發(fā)promise的回調(diào)時(shí)，就有問題了，看代碼：

new Promise((resolve, reject) => {
		requestAnimationFrame(f)
}).then()
function f () {
   // 動(dòng)畫結(jié)束之后，如何觸發(fā)resolve
}

據(jù)我了解的，resolve只能在promise內(nèi)部調(diào)用，而Promise.resolve的用法，只適合去封裝異步函數(shù)，在這種情況下，最好就是像我那樣寫，把requestAnimationFrame和它的回調(diào)函數(shù)都封裝在promiset中，等待時(shí)機(jī)成熟就調(diào)用resolve就可以了。

如果非要寫在外面也是有辦法的，把resolve當(dāng)作參數(shù)傳出去，不過要注意的是resolve必須是第二個(gè)參數(shù)：

<div id='alimate' style="background-color: brown; width: 100px;height: 100px;"></div>
<script>
const element = document.getElementById('alimate');
let start;
function step(timestamp,resolve) {
		  if (start === undefined)
		    start = timestamp;
		  const elapsed = timestamp - start;
		  //這里使用`Math.min()`確保元素剛好停在200px的位置。
		  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
		  if (elapsed < 2000) { // 在兩秒后停止動(dòng)畫
		    requestAnimationFrame(step);
		  }else {
				resolve()
			}
		}
var f = new Promise((resolve, reject) => {
		var s;
		requestAnimationFrame(step(s, resolve));
})
f.then(() => {
		element.innerHTML= "動(dòng)畫結(jié)束了！";
})

這樣寫的后果就是step的第一個(gè)參數(shù)失效了，不再是一個(gè)時(shí)間戳了，不過你可以自己寫一個(gè)，動(dòng)畫也可以實(shí)現(xiàn)。再?gòu)?qiáng)調(diào)下resolve要先放在第二個(gè)，如果你把resolve寫在第一個(gè)，那step得到的resolve就不再是resolve函數(shù)，而是一個(gè)時(shí)間戳，這樣的話resolve就無法執(zhí)行了！

參考資料：

developer.mozilla.org/zh-CN/docs/…

stackoverflow.com/questions/6…

以上就是promise結(jié)合requestAnimationFrame用法示例的詳細(xì)內(nèi)容，更多關(guān)于promise requestAnimationFrame的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論