🗑️ InteractionManager
已弃用
避免长时间运行的工作,改用 requestIdleCallback。
InteractionManager 允许在任何交互/动画完成后安排长时间运行的工作。特别是,这允许 JavaScript 动画流畅运行。
应用程序可以使用以下方法安排在交互之后运行的任务:
tsx
InteractionManager.runAfterInteractions(() => {
// ...长时间运行的同步任务...
});
将其与其他调度替代方案进行比较:
requestAnimationFrame()用于随时间动画化视图的代码。setImmediate/setTimeout()稍后运行代码,注意这可能会延迟动画。runAfterInteractions()稍后运行代码,而不延迟活动动画。
触摸处理系统将一个或多个活动触摸视为“交互”,并将延迟 runAfterInteractions() 回调,直到所有触摸结束或被取消。
InteractionManager 还允许应用程序通过在动画开始时创建交互“句柄”并在完成时清除它来注册动画:
tsx
const handle = InteractionManager.createInteractionHandle();
// 运行动画... (runAfterInteractions 任务已排队)
// 稍后,在动画完成后:
InteractionManager.clearInteractionHandle(handle);
// 如果所有句柄都被清除,排队的任务将运行
runAfterInteractions 接受普通回调函数,或带有 gen 方法的 PromiseTask 对象,该方法返回一个 Promise。如果提供了 PromiseTask,则在开始下一个可能更早同步排队的任务之前,它将完全解析(包括通过 runAfterInteractions 调度更多任务的异步依赖项)。
默认情况下,排队任务在一个 setImmediate 批次中的循环中一起执行。如果 setDeadline 被调用并传入正数,则任务将只执行到截止日期(就 js 事件循环运行时间而言)接近为止,此时执行将通过 setTimeout 让出,允许触摸等事件启动交互并阻止排队任务执行,使应用程序响应更灵敏。
示例
基本
- TypeScript
- JavaScript
高级
- TypeScript
- JavaScript
参考
方法
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 批次中执行(默认)。