React Native中的InteractionManager允许你在交互/动画执行完毕后再执行计划中的耗时任务。InteractionManager的作用尤其体现在可以让JavaScript动画更流畅的运行。
App可以通过下面这种方式来将耗时任务安排在交互完成之后执行:
InteractionManager.runAfterInteractions(() => { // ...耗时的同步任务(long-running synchronous task)... });
将它与其他类似的方法进行一个对比:
- requestAnimationFrame():用于绘制一次动画;
- setImmediate/setTimeout():延后执行代码,注意这可能会延迟动画;
- runAfterInteractions():延后执行代码,这不会延迟当前处于活动状态的动画。
触控系统会将单点或多点触控视为一个“交互”(interaction),然后在等到所有触控都结束会被取消后再执行runAfterInteractions()回调函数。
InteractionManager也允许app在动画开始时通过创建交互“句柄”(interaction “handle”)来注册动画,然后在动画结束后清除该句柄。就像下面这样:
var 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对象,那么这个任务(task)彻底完成(这里的彻底完成,是指这个任务代码中涉及到的异步代码里通过runAfterInteractions产生的其他任务也都完成)后才会执行任务队列中的后续任务。
默认情况下,队列中的任务会一次性地在setImmediate方法中通过一个循环全部执行掉。如果你调用setDeadline方法并传入一个正数,那么这些任务就会在指定的时间到达后再执行(借助setTimeout方法实现),这样就会阻塞队列中剩下的任务,并能够给触摸交互留出操作时间,好让app能更好地响应用户。
目录
方法:
static runAfterInteractions(task)
待所有交互都完成后再执行给定的函数。该方法会返回一个可以取消的“promise”。
static createInteractionHandle()
通知管理器交互已经开始了。
static clearInteractionHandle(handle)
通知管理器交互已经结束了。
static setDeadline(deadline)
若入参为正数,会使用setTimeout来在eventLoopRunningTime达到指定时间(入参)后开始执行任务。若入参不是正数,则所有任务都会在setImmediate方法中一次性批量执行掉(默认行为)。
属性:
Events: CallExpression
addListener: CallExpression
参考:
- https://facebook.github.io/react-native/docs/interactionmanager.html