如题,用setTimeout()定时器和echarts编写一个实时跳动的柱形图。页面运行时间较长,浏览器卡死,引起了我的重视,将计时器时间调短,没多久浏览器内存就飙升。开始怀疑是计时器问题,因为之前用的是setInterval(),查到好多资料说是没有清除setInterval导致内存占用,改为setTimeout后情况并没有改善。后来用开发工具查看发现是echarts2.js导致的内存飙升,转换方向,果然查到问题所在。
在生成echarts图形时是这么写的:
var chart = document.getElementById('manyColumn');
var echart = echarts.init(chart);
正常这么初始化echarts图形是没有问题的!可是我的需求是要定时3秒更新柱形图,这就有问题了。跟随定时器循环调用这段代码,会导致每3秒钟就创建一个echarts对象,而且echarts对象占用内存非常大,这就导致了浏览器的内存泄漏(新学到的名词,不知道是否准确)。
将代码改为如下:
var chart = document.getElementById('manyColumn');
var echart = echarts.getInstanceByDom(chart);
if (chart==undefined) {
echart = echarts.init(chart);
}
问题解决!