跳到主要内容

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 接受一个普通的回调函数，或一个具有返回 Promise 的 gen 方法的 PromiseTask 对象。如果提供了 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 批处理中执行（默认）。