Skip to main content

InteractionManager

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

¥InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

应用可以安排任务在与以下交互后运行：

¥Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

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

¥Compare this to other scheduling alternatives:

  • requestAnimationFrame() 表示随着时间的推移对视图进行动画处理的代码。

    ¥requestAnimationFrame() for code that animates a view over time.

  • setImmediate/setTimeout() 稍后运行代码，请注意这可能会延迟动画。

    ¥setImmediate/setTimeout() run code later, note this may delay animations.

  • runAfterInteractions() 稍后运行代码，不会延迟活动动画。

    ¥runAfterInteractions() run code later, without delaying active animations.

触摸处理系统将一个或多个活动触摸视为 'interaction'，并将延迟 runAfterInteractions() 回调，直到所有触摸都结束或取消。

¥The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.

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

¥InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:

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 采用普通回调函数，或者带有返回 Promise 的 gen 方法的 PromiseTask 对象。如果提供了 PromiseTask，则在开始下一个可能之前已同步排队的任务之前，它会被完全解析（包括还通过 runAfterInteractions 调度更多任务的异步依赖）。

¥runAfterInteractions takes either a plain callback function, or a PromiseTask object with a gen method that returns a Promise. If a PromiseTask is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via runAfterInteractions) before starting on the next task that might have been queued up synchronously earlier.

默认情况下，排队任务在一个 setImmediate 批次中循环执行。如果使用正数调用 setDeadline，那么任务只会执行到截止时间（就 js 事件循环运行时间而言）临近，此时执行将通过 setTimeout 屈服，允许触摸等事件开始交互并阻止排队 执行任务，使应用响应更快。

¥By default, queued tasks are executed together in a loop in one setImmediate batch. If setDeadline is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.

示例​

¥Example

基本​

¥Basic

高级​

¥Advanced

参考

¥Reference

方法​

¥Methods

runAfterInteractions()​

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

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

¥Schedule a function to run after all interactions have completed. Returns a cancellable "promise".

createInteractionHandle()​

static createInteractionHandle(): Handle;

通知经理互动已开始。

¥Notify manager that an interaction has started.

clearInteractionHandle()​

static clearInteractionHandle(handle: Handle);

通知经理交互已完成。

¥Notify manager that an interaction has completed.

setDeadline()​

static setDeadline(deadline: number);

正数将在 eventLoopRunningTime 达到截止时间值后使用 setTimeout 来安排任何任务，否则所有任务将在一个 setImmediate 批次中执行（默认）。

¥A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default).