跳到主要内容

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 接受一个普通的 callback 函数，或一个带有 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 批处理中执行（默认）。