跳到主要内容

🗑️ InteractionManager

已弃用

避免运行耗时过长的工作，请改用 requestIdleCallback。

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

runAfterInterInteractions 接受一个普通的回调函数，或者一个带有 gen 方法的 PromiseTask 对象，该方法返回一个 Promise。如果提供了一个 PromiseTask，那么它将被完全解析（包括可能通过 runAfterInteractions 安排了更多任务的异步依赖项），然后再开始处理可能在此之前同步排队的下一个任务。

默认情况下，排队的任务将在一个 setImmediate 批次中一起执行。如果使用正数调用 setDeadline，则任务只会被执行到事件循环运行时间接近截止时间为止，届时将通过 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 在事件循环运行时间达到截止值后调度任何任务，否则所有任务将在一个 setImmediate 批次中执行（默认）。