InteractionManager
InteractionManager 允许在所有交互/动画完成后调度长时间运行的工作。特别是,这允许 JavaScript 动画流畅运行。
应用程序可以使用以下方法调度在交互完成后运行的任务
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});
将其与其他调度方案进行比较
requestAnimationFrame()
用于随时间推移动画化视图的代码。setImmediate/setTimeout()
稍后运行代码,请注意这可能会延迟动画。runAfterInteractions()
稍后运行代码,而不会延迟活动的动画。
触摸处理系统将一个或多个活动触摸视为“交互”,并将延迟 runAfterInteractions()
回调,直到所有触摸结束或被取消。
InteractionManager 还允许应用程序通过在动画开始时创建交互“句柄”并在完成时清除它来注册动画。
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
接受一个普通回调函数或一个 PromiseTask
对象,该对象具有一个返回 Promise
的 gen
方法。如果提供了 PromiseTask
,则在开始处理可能更早同步排队的下一个任务之前,它将完全解析(包括也通过 runAfterInteractions
调度更多任务的异步依赖项)。
默认情况下,排队的任务在一个 setImmediate
批次中循环一起执行。如果 setDeadline
被调用并带有一个正数,则任务将仅执行到截止日期(以 js 事件循环运行时间计)临近,此时执行将通过 setTimeout 让出,允许诸如触摸之类的事件启动交互并阻止排队的任务执行,从而使应用程序更具响应性。
示例
基础
- TypeScript
- JavaScript
高级
- TypeScript
- JavaScript
参考
方法
runAfterInteractions()
static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);
调度一个函数,使其在所有交互完成后运行。返回一个可取消的“promise”。
createInteractionHandle()
static createInteractionHandle(): Handle;
通知管理器交互已开始。
clearInteractionHandle()
static clearInteractionHandle(handle: Handle);
通知管理器交互已完成。
setDeadline()
static setDeadline(deadline: number);
一个正数将使用 setTimeout 来调度事件循环运行时间达到截止日期值后的任何任务,否则所有任务都将在一个 setImmediate 批次中执行(默认)。