有沒有setTimeout（..，0）比requestAnimationFrame（）更好的情況？

Question

我一直在使用setTimeout(function(){ ... }, 0)作爲延遲函數調用一次的方法。

通常我一直在使用這種方法時我試圖直接操縱事件循環，以確保一切在一定的順序執行，而且在大多數情況下，它與UI做的。

，有時我能感覺到「嘀」，尤其是當我用它來運行一個元素上一些第三方JS庫。

但我最近發現​​。這幾乎實現了同樣的事情，但以更優雅的方式。

現在我很好奇，有沒有任何情況下，更有利於使用setTimeout(function(){ ... }, 0)而不是requestAnimationFrame(function(){ ... })？

Answer 1

從https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

只有紅旗，我看到的是這個傢伙：

回調幅度可能在運行時按順序降低到較低速率 背景標籤或隱藏的iframe提高性能 和電池壽命。

但我相信只有當你有requestAnimationFrame遞歸調用自己時纔會發生。

所以，如果你已經有了一個使用requestAnimationFrame代碼需要長時間運行的一點，它可能如果用戶不是選項卡上需要更長的時間。除此之外，你正在使用一個函數做一些它從來沒有打算做的事情，但是setTimeout並沒有被設計成一種跳過勾號的方式，所以...

作爲一個建議的話： 一般，我發現你通常可以通過正確使用承諾等來避免setTimeout技巧。但是我發現了一些案例，尤其是一些案例。當使用Angular 1.x時，我無法找出比使用它更好的解決方案。

有趣的消息。用天真的性能測試，requestAnimationFrame似乎是顯著快：

console.time() 
for(let i = 0; i < 100000; i++){ 
    requestAnimationFrame(() => {(5*5*77/3)*88}); 
} 
console.timeEnd() 

得到80ms的〜（我的電腦）

console.time() 
for(let i = 0; i < 100000; i++){ 
    setTimeout(() => {(5*5*77/3)*88}, 0); 
} 
console.timeEnd() 

得到〜225ms（在我的電腦）

Answer 2

他們不是一回事。

使用setTimeout(fn, 0)將盡可能多地運行調用自身的函數。通常爲60倍的第二 -

使用requestAnimationFrame(fn)調用自身的函數將一次針對每個幀被調用。正如其名稱所暗示的那樣，它是用於動畫的，因爲更新頁面狀態的次數通常不足以顯示。