跳至主内容

🗑️ 交互管理器

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

已弃用

避免长时间运行的任务，请改用 requestIdleCallback。

交互管理器允许在交互/动画完成后调度长时间运行的任务。这尤其能确保 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 方法（返回 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 达到截止时间后执行）；否则所有任务将在单次 setImmediate 批次中执行（默认行为）。