跳到主要內容

InteractionManager

InteractionManager 允許在任何互動/動畫完成後排程長時間運行的工作。特別是，這讓 JavaScript 動畫能夠流暢運行。

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

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

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

  • requestAnimationFrame() 用於隨著時間推移動畫視圖的程式碼。
  • setImmediate/setTimeout() 稍後運行程式碼，請注意這可能會延遲動畫。
  • 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

runAfterInteractions 接受純回呼函式或具有 gen 方法的 PromiseTask 物件，該方法返回 Promise。如果提供 PromiseTask，則它將完全解析（包括也通過 runAfterInteractions 排程更多任務的異步依賴項），然後再開始處理可能更早同步排隊的下一個任務。

預設情況下，排隊的任務在一個 setImmediate 批次中的迴圈中一起執行。如果使用正數調用 setDeadline，則任務將僅執行到截止時間（以 js 事件迴圈運行時間為單位）接近，此時執行將通過 setTimeout 產生，從而允許諸如觸摸之類的事件開始互動並阻止排隊的任務執行，使應用程式更靈敏。

範例​

基本​

進階​

參考

方法​

runAfterInteractions()​

tsx
static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);

排程一個函式在所有互動完成後運行。返回一個可取消的「promise」。

createInteractionHandle()​

tsx
static createInteractionHandle(): Handle;

通知管理器互動已開始。

clearInteractionHandle()​

tsx
static clearInteractionHandle(handle: Handle);

通知管理器互動已完成。

setDeadline()​

tsx
static setDeadline(deadline: number);

正數將使用 setTimeout 排程在 eventLoopRunningTime 達到截止值後的任何任務，否則所有任務將在一個 setImmediate 批次中執行（預設）。