跳到主要內容

計時器

計時器是應用程式的重要組成部分,React Native 實作了 瀏覽器計時器

計時器

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)setTimeout(fn, 0) 不同 - 前者會在所有影格刷新後觸發,而後者會盡快觸發(在 iPhone 5S 上每秒超過 1000 次)。

setImmediate 在當前 JavaScript 執行區塊的末尾執行,就在將批次回應發送回原生程式碼之前。請注意,如果您在 setImmediate 回呼中呼叫 setImmediate,它會立即執行,而不會在兩者之間返回原生程式碼。

Promise 實作使用 setImmediate 作為其非同步實作。

注意

在 Android 上除錯時,如果除錯器和裝置之間的時間漂移;動畫、事件行為等事物可能無法正常運作,或者結果可能不準確。請在您的除錯器機器上執行 adb shell "date `date +%m%d%H%M%Y.%S%3N`" 來修正此問題。在真實裝置上使用需要 Root 權限。

InteractionManager

優質原生應用程式感覺如此流暢的原因之一是避免在互動和動畫期間執行耗時的操作。在 React Native 中,我們目前有一個限制,即只有一個 JS 執行緒,但您可以使用 InteractionManager 來確保長時間運行的工作在任何互動/動畫完成後才開始排程。

應用程式可以使用以下方式排程在互動後執行的任務

tsx
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});

將此與其他排程替代方案進行比較

  • requestAnimationFrame():用於隨時間為視圖製作動畫的程式碼。
  • setImmediate/setTimeout/setInterval():稍後執行程式碼,請注意這可能會延遲動畫。
  • runAfterInteractions():稍後執行程式碼,而不會延遲活動動畫。

觸控處理系統將一個或多個活動觸控視為「互動」,並將延遲 runAfterInteractions() 回呼,直到所有觸控結束或取消。

InteractionManager 也允許應用程式透過在動畫開始時建立互動「處理」,並在完成時清除它來註冊動畫

tsx
const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared