跳到主要内容
版本:0.81

🗑️ InteractionManager

已弃用

避免长时间运行的工作,改用 requestIdleCallback

InteractionManager 允许在任何交互/动画完成后安排长时间运行的工作。特别是,这允许 JavaScript 动画流畅运行。

应用程序可以使用以下内容安排在交互后运行的任务:

tsx
InteractionManager.runAfterInteractions(() => {
// ...长时间运行的同步任务...
});

将其与其他调度替代方案进行比较:

  • requestAnimationFrame() 用于随时间动画化视图的代码。
  • setImmediate/setTimeout() 稍后运行代码,注意这可能会延迟动画。
  • runAfterInteractions() 稍后运行代码,而不延迟活动动画。

触摸处理系统将一个或多个活动触摸视为“交互”,并将延迟 runAfterInteractions() 回调,直到所有触摸结束或被取消。

InteractionManager 还允许应用程序通过在动画开始时创建交互"handle"并在完成时清除它来注册动画:

tsx
const handle = InteractionManager.createInteractionHandle();
// 运行动画... (`runAfterInteractions` 任务被排队)
// 稍后,动画完成后:
InteractionManager.clearInteractionHandle(handle);
// 如果所有 handle 都被清除,排队的任务将运行

runAfterInteractions 接受一个普通回调函数,或者一个带有 gen 方法(返回 Promise)的 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 达到 deadline 值后调度任何任务,否则所有任务将在一个 setImmediate 批次中执行(默认)。