跳到主要内容

🗑️ InteractionManager

已弃用

避免进行长时间运行的工作，并改用 requestIdleCallback。

InteractionManager 允许在任何交互/动画完成后调度长时间运行的工作。特别是，这使得 JavaScript 动画能够平滑运行。

应用程序可以使用以下方式安排在交互之后运行的任务：

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

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

  • requestAnimationFrame()：用于随时间为视图添加动画效果的代码。
  • setImmediate/setTimeout()：稍后运行代码，请注意这可能会延迟动画。
  • runAfterInteractions()：稍后运行代码，而不会延迟当前正在进行的动画。

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

InteractionManager 还允许应用程序通过在动画开始时创建一个交互“句柄”，并在完成时清除它，来注册动画：

React TSX
const handle = InteractionManager.createInteractionHandle();
// 运行动画...（`runAfterInteractions` 任务会进入队列）
// 之后，在动画完成时：
InteractionManager.clearInteractionHandle(handle);
// 如果所有句柄都已清除，则队列中的任务会运行

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

默认情况下，队列中的任务会在一次 setImmediate 批处理中一起在循环中执行。如果调用 setDeadline 并传入一个正数，那么任务只会执行到接近截止时间（按 js 事件循环运行时间计算）为止，此时执行会通过 setTimeout 让出，从而允许诸如触摸之类的事件开始交互并阻止队列中的任务执行，使应用更加响应迅速。

示例​

基础​

参考

方法​

runAfterInteractions()​

React TSX
static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);

安排一个函数在所有交互完成后执行。返回一个可取消的“promise”。

createInteractionHandle()​

React TSX
static createInteractionHandle(): Handle;

通知管理器一次交互已经开始。

clearInteractionHandle()​

React TSX
static clearInteractionHandle(handle: Handle);

通知管理器一次交互已经完成。

setDeadline()​

React TSX
static setDeadline(deadline: number);

正数将使用 setTimeout 来调度任务；当 eventLoopRunningTime 达到该截止值后再执行。否则，所有任务都会在一次 setImmediate 批处理中执行（默认）。