闭包
闭包:有权访问另一个函数作用域中的变量的函数。
数天前写了几个echarts图表,由于页面重复调用次数太多不想代码冗余,就把echarts图表中的公共部分提取出来:
function tutu(id,tyty,data,name,name2){
dom=null;myChart=null;option=null;
var dom = document.getElementById(id);
var myChart = echarts.init(dom);
var app = {};
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true,
x: 'center',
y: 'top',
data: name
},
xAxis: [
{
show: true,
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
dataZoom: [
{ type:"slider",
xAxisIndex:0,
bottom:"10",
start:0,
end:100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleStyle:{
color: '#fff',
shadowBlur: 1,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 1,
shadowOffsetY: 1
},
fillerColor:"rgba(220,210,230,0.6)",
labelFormatter:function (value,params) {
var str = "";
if(params.length > 2){
str = params.substring(0,2)+"…";
}else {
str = params;
}
return str;
}
}
],
yAxis: [
{
show: true,
type: 'value'
}
],
series: [
{
name: name2,
type: tyty,
color:['#1dc5a3'],
barWidth: '60%',
data: data,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
(代码写得不好将就着看哈)
将需要改变的变量作为参数传进来,id,tyty,data,name,name2 分别为 canvas的ID,图表的样式,数据,图表名称。包含在一个tab()函数里,然后tab()函数又包含在onclick事件的匿名函数里。onload加载。
运行之后就是浏览器奔溃。除了内存泄漏还有啥?
于是发现每次都是onclick事件触发的时候 内存消耗速度瞬增。所以很可能问题就是出在onclick函数那里。
在onclick匿名函数中调用了tab()方法,(tab()方法载入数据又调用tutu()方法),tab()函数中引用了onclick事件中的变量。
发现每次触发onclick事件时调用后的数据没有清除(因为onclick调用的是一个匿名函数,而匿名函数里执行了闭包(tab),在onclick事件执行完毕后,匿名函数作用域链仍在引用onclick的活动对象,导致活动对象无法释放),导致数据累积。所以在onclick事件触发之前先清除onclick事件是很有必要的。
tabli[1].onclick=function () {
tabli[1].onclick=null;
tab("online","online2","online3","online4",{
data:[0.1, 0.2, 0.3,0.4, 0.5,1, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3],
sendH:['推送频率'],
sendH2:'推送频率',
datapie:[
{value:0.1, name:'1月'},
{value:0.2, name:'2月'},
{value:0.3, name:'3月'},
{value:0.4, name:'4月'},
{value:0.5, name:'5月'},
{value:1, name:'6月'},
{value:0.8, name:'7月'},
{value:0.7, name:'8月'},
{value:0.6, name:'9月'},
{value:0.5, name:'10月'},
{value:0.4, name:'11月'},
{value:0.3, name:'12月'}
]
},"onlinetu1","onlinetu2","onlinetu3","onlinetu4","ibox2","formid2");
};
所以在onclick事件里手动清除数据。