[GitHub] ranxiangfu opened a new issue #8285: requestAnimationFrame()方法永无休止的执行

[GitBox <gi...@apache.org>]

ranxiangfu opened a new issue #8285: requestAnimationFrame()方法永无休止的执行
URL: https://github.com/apache/incubator-echarts/issues/8285
 
 
   <!--
   为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   
   - 背景
   
   Angular5.0 + echarts3.8.5
   
   问题还要从 [#7047](https://github.com/apache/incubator-echarts/issues/7047) 开始说起，Animation对象里的_startLoop函数里有个递归调用step，并且self._running一直是true，这使得step一直会被调用。这在Angular的zone会触发变更检查，导致浏览器持续占用cpu。
   
   我仔细看了 [#7047](https://github.com/apache/incubator-echarts/issues/7047)里的讨论，他们通过NgZone里的runOutsideAngular()方法让AnimationFrame避开Angular的脏检查。但是requestAnimationFrame()方法仍然是一直在执行的，尽管我切换到其他页面（无图表和动画的页面），它还是一直在执行。
   性能图可以看到requestAnimationFrame()还是在一直执行：
   ![image](https://user-images.githubusercontent.com/31944996/39616870-0d27fa14-4fb0-11e8-90fe-f8c57288aea1.png)
   通过ngDoCheck()钩子看到控制台一直在打印:
   ![image](https://user-images.githubusercontent.com/31944996/39616919-477cffac-4fb0-11e8-9d29-b41402406e7c.png)
   
   - 疑问
   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配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   option = {
   
   }
   
   ```
   
   
   
   
   ### Other comments [其他信息]
   <!-- For example: Screenshot or Online demo -->
   <!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
   我的图表是基于地图的迁徙图，模仿GL实例做的：http://gallery.echartsjs.com/editor.html?c=xB1a5uJTR
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org