requestAnimationFrame()方法永无休止的执行

[ranxiangfu]

One-line summary [问题简述]

• 背景

Angular5.0 + echarts3.8.5

问题还要从 #7047 开始说起，Animation对象里的_startLoop函数里有个递归调用step，并且self._running一直是true，这使得step一直会被调用。这在Angular的zone会触发变更检查，导致浏览器持续占用cpu。

我仔细看了 #7047里的讨论，他们通过NgZone里的runOutsideAngular()方法让AnimationFrame避开Angular的脏检查。但是requestAnimationFrame()方法仍然是一直在执行的，尽管我切换到其他页面（无图表和动画的页面），它还是一直在执行。
性能图可以看到requestAnimationFrame()还是在一直执行：

通过ngDoCheck()钩子看到控制台一直在打印:

• 疑问
  requestAnimationFrame()应该是由页面上某个图表实例触发的，那么当我切换页面之后，这个实例在后续 理应被GC，那么requestAnimationFrame()函数也应该停止执行，而不是仍然在递归的调用。

另外当我某个页面绘制的echarts图表有一个比较复杂的动画时，由于动画的原因占用CPU会变高。而且只要打开过这个页面，访问整个项目的任何页面都变得CPU特别高，因为requestAnimationFrame()一直在执行。

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.8.5
• Browser version [浏览器类型和版本]: Chrome 64.0.3282.186（正式版本） （64 位）
• OS Version [操作系统类型和版本]: windows 10

Expected behaviour [期望结果]

requestAnimationFrame()方法在页面切换后停止执行。

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

我的图表是基于地图的迁徙图，模仿GL实例做的：http://gallery.echartsjs.com/editor.html?c=xB1a5uJTR

[PYfive]

我也遇到了一样的问题，是否可以手动去调用 Animation 的 stop()？

[ranxiangfu]

@PYfive 手动调用Animation的stop需要Animation对应的id，但是这个Animation是由echarts内部创建的，我们无法获取到这个id。

[PYfive]

@ranxiangfu 问题解决了，页面切换的时候，用clear（）方法清空一下数据。

[ranxiangfu]

@PYfive clear()方法是清空echart图表实例的数据，动画还是没有停止的啊。
这是访问过有图表的页面后再访问一个简单页面的性能分析：

这是只访问这个简单页面的性能分析：

有什么好的解决方案吗？

[PYfive]

@ranxiangfu 清空之后你其它的页面还是很卡顿吗？ cpu占用率是否正常了

[ranxiangfu]

@PYfive 我看了CPU是变正常了，其他页面也不卡了。多谢！之前关注点都放在了性能分析那里了。

[wang01ping]

clear()方法是清空echart图表实例的数据，动画有停止了吗

[Colisy]

这个问题解决了吗？有demo吗？