闭包中的内存泄漏

闭包

闭包:有权访问另一个函数作用域中的变量的函数。

数天前写了几个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事件里手动清除数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值