快捷導(dǎo)航

promise結(jié)合requestAnimationFrame用法示例

更新時間：2022年11月04日 09:55:55 作者：字節(jié)逆旅

這篇文章主要為大家介紹了promise結(jié)合requestAnimationFrame用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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 < 1000);
		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的用法：

<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) { // 在兩秒后停止動畫
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);
</script>

我在這上面加了點(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é)合上面的用法示例，我們可以這樣寫：

<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) { // 在兩秒后停止動畫
		    requestAnimationFrame(step);
		  }else {
				resolve()
			}
		}
		requestAnimationFrame(step);
})
f.then(() => {
		element.innerHTML= "動畫結(jié)束了！";
})
</script>

需要注意的是，這個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ù)：

<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) { // 在兩秒后停止動畫
		    requestAnimationFrame(step);
		  }else {
				resolve()
			}
		}
var f = new Promise((resolve, reject) => {
		var s;
		requestAnimationFrame(step(s, resolve));
})
f.then(() => {
		element.innerHTML= "動畫結(jié)束了！";
})

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

參考資料：

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

stackoverflow.com/questions/6…

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

您可能感興趣的文章: