为什么此功能导致内存泄漏

Question

function parseAttach(b)
{
    var h="";
    for(i=0;i<b.length;i++)
    {
        var a=b[i];
        switch(a['type'])
        {
            case "image":
                h+='<li class="attach aImg" style="background:#000;border-bottom:2px solid #fff"><img style="max-width:425px;max-height:500px" src="http://img.xiami.com/u/phoo/'+a['file']+'"></li>';
            break;
            case "video":
                h+='<li class="attach aVideo" style="background:#f3f3f3"><span class="MxND" f="'+a['from']+'" d="'+a['id']+'"></span></li>';
            break;
            case "music":
                h+='<li class="attach aMusic"><embed src="http://www.xiami.com/widget/0_'+a['id']+'/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed></li>';
            break;
        }
    }
    return h;
}

Once above function is running, the page cannot be interacted, memory and cpu usage of that page skyrocket.

this is an example of parameter b passed to this function:

[{"type":"video","from":"k6","id":"kyxGTZbD-vQ8Domm-eeHiQ"}]

b.length is not more than 2 and this function was executed no more than three times. If this function is removed, memory leaking will not happen.

UPDATE:

Following @GarethMcCaughan 's suggestion, I added alert(i) to the top of the loop, it keeps alerting 0, I headed to the invocation code:

for(i=0;i<c[0].length;i++)//the breakpoint
{
    ......
    if(t[6].length>0)
    {
        //console.log(t[6].length);
        //var a=parseAttach(t[6]);
        var a="";
        h+='<ul class="attaches">'+a+'</ul>';
    }
   ......
}

as you see in the comment, if I replace the invocation with a console.log, the log only show 4 times of execution. But why the function are invoked repeatedly?

Then I found the console report a breakpoint at the top of the loop(I've comment it out), is this the reason why the function keeps invoking?

Answer 1

In both of your loops you have not put var before your i variable. This means it is global. If it is global then both loops are using the same i .

for(i=0;i<b.length;i++)

add var and it should fix it:

for(var i=0;i<b.length;i++)

EDIT : Further clarification:

for(i=0;i<c[0].length;i++)
{
    ......
    if(t[6].length>0)
    {
        // THIS CALL WILL SET THE GLOBAL i TO t[6].length
        var a=parseAttach(t[6]);
    }
   ......
}

Therefore, the exit condition of the outer loop is never met, every iteration of the loop sets i back so that i never reaches c[0].length .

Answer 2

Everything seems fine apart from one bug: You forgot to make the counter variable i local. When invoked from a loop, the code would reset the same-named counter variable of the outer loop (to 2, as this is the max length) and make it never reach its end condition:

var i; // this variable will always be referenced
function x(number) {
    for (i=0; i<number; i++)
        dosomething;
}
for (i=0; i<5; i++)
    x(2); // resets i to 2
// => never-ending loop

The infinite loop will make your browser hang, freezing the interface until the code is executed. Some browser might throw an error for too-long-running scripts, implemented with a timeout.