InteractionMnager(交互管理器)

(一)前言

今天我们主要看一个可以提升用户体验和交互效果的模块InteractionMnager(交互管理器)

(二)基本内容        

使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行，这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。

在应用开发中我们可以如下进行执行任务

?

1 2 3 4 5

InteractionManager.runAfterInteractions(() => {      //执行耗时的同步任务   });

该模块和其他相关的调度方法对比:

• requestAnimationFrame():执行控制动画效果的代码
• setImmediate/setTimeout():设置延迟执行任务的时间，该可能会影响到正在执行的动画
• runAfterInteractions():延迟执行任务，该不会影响到正在执行的动画效果

触摸系统中的单点或者多点触控都是交互动作，耗时任务会在这些触摸交互动作执行完成之后或者取消以后回调runAfterInteractions()方法进行执行。

InteractionManager也允许应用在动画开始的时候通过createInteractionHandle()方法注册动画生成一个句柄，在结束的时候清除该句柄。

?

1 2 3 4 5 6 7 8 9

var handle = InteractionManager.createInteractionHandle();   //执行动画 (`runAfterInteractions` tasks are queued)   //动画执行结束   InteractionManager.clearInteractionHandle(handle);   //动画清除之后，开始直接runAfterInteractions中的任务

runAfterInteractions任务也可以接收一个普通的回调函数或者一个带有gen方法并且返回一个Promise的PromiseTask对象。如果参数是PromiseTask对象，那么任务是异步执行的，也会阻塞。该会等着当前任务执行完毕以后才能执行下一个任务。

默认情况下，队列任务会一次性在setImmediate方法中批量执行。如果你通过setDeadline方法设置一个时间值，那么任务会在延迟该设定值时间进行执行。这时候会调用setTimeout方法进行挂起任务并且阻塞其他任务的执行。这样可以给触摸交互等操作留出时间更好的相应用户操作。

(三)方法与属性

1.  runAfterInteractions(task)  静态方法,在用户交互和动画结束以后执行任务
2. createInteractionHandle() 静态方法，创建一个句柄(处理器)，通知管理器，某个动画或者交互开始了

3. clearInteractionHandle(handler:Handle)  静态方法，进行清除句柄，通知管理器，某个动画或者交互结束了。

4. setDeadline(deadline:number) 静态方法, 设置延迟时间，该会调用setTimeout方法挂起并且阻塞所有没有完成的任务，然后在eventLoopRunningTime到设定的延迟时间后，然后执行setImmediate方法进行批量执行任务
5. Events:CallExpression
6. addListener:CallExpression

(四)具体使用

其实该模块主要用于提升用户交互体验效果的，基本使用起来非常简单，大家可以看一下大大开发的reading项目(https://github.com/attentiveness/reading),里边有部分使用该模块的方法，我这边截图一下即可：

(五)最后总结

今天我们主要讲解了一下提升用户体验和交互效果的模块InteractionMnager(交互管理器)基本介绍和使用方法。

原链接