2017-05-26 59 views
1

我一直在使用setTimeout(function(){ ... }, 0)作爲延遲函數調用一次的方法。有沒有setTimeout(..,0)比requestAnimationFrame()更好的情況?

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

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

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

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

+0

什麼是「勾號」?你認爲什麼樣的應用程序? – Bergi

+0

很明顯,他們正在做不同的事情,所以你應該使用它們的目的? – Bergi

回答

0

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(在我的電腦)

1

他們不是一回事。

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

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

相關問題