IE memory leak, how to resolve?

rizwan6feb · #1 September 5th, 2008, 05:55 AM

I am working on an ajax chat application, done most of the work but when i tested it on IE (both on IE6 and IE7), found that there is a memory leak. The application works fine on FF. How can i fix this?

I have used ajax in the following way (this is a similar to how i am using ajax in my chat application); incrementer.php file on line # 34 simply prints an incremented value from the session

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script language="javascript">

    function getAjaxObject(){

        try{

            ajaxRequest = new XMLHttpRequest();

        } catch (e){

            // Internet Explorer Browsers

            try{

                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

            } catch (e) {

                try{

                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

                } catch (e){

                    // Something went wrong

                    alert("Your browser doesn't support ajax!");

                    return false;

                }

            }

        }

        return ajaxRequest;    

    }

    function startCounting(){

        var a=getAjaxObject();

        a.onreadystatechange = function(){

            if(a.readyState==4){

                var text=a.responseText;

                var e=document.getElementById('val');

                if(e){

                    e.innerHTML=text;

                }

            }

        }

        a.open("GET", "incrementer.php", true);

        a.send(null);

        setTimeout(startCounting,1);

    }

</script>

</head>
 
<body>

    <input type="button" value="Send Object" onclick="startCounting()" />

    <div id="val">    </div>

</body>

</html>

acoder · #2 September 5th, 2008, 03:50 PM

1 millisecond is a bit too small, isn't it?

Try using something like IEDrip to detect the leak. It is often caused by circular references, particularly closures - see link.

rizwan6feb · #3 September 6th, 2008, 05:26 AM

Quote:

Originally Posted by acoder

1 millisecond is a bit too small, isn't it?

Try using something like IEDrip to detect the leak. It is often caused by circular references, particularly closures - see link.

Thanks for your reply. Setting the interval to 1 millisecond i can see quick increase in the use of memory.

I am unable to trace circular reference in my code. If there is any, please point to that & and how can i resolve this

rizwan6feb · #4 September 6th, 2008, 06:47 AM

I have found a solution which leads to another problem. The solution is given below, i have got rid of inner function (see line # 38 ). Now there is an error at line# 28 as i have no access to variable 'a' within updateText The problem is how can i access variable 'a' in the updateText function.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="javascript">

    var x=0;

    function getAjaxObject(){

        try{

            ajaxRequest = new XMLHttpRequest();

        } catch (e){

            // Internet Explorer Browsers

            try{

                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

            } catch (e) {

                try{

                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

                } catch (e){

                    // Something went wrong

                    alert("Your browser doesn't support ajax!");

                    return false;

                }

            }

        }

        return ajaxRequest;    

    }

    function updateText(){

        if(a.readyState==4){

            var text=a.responseText;

            var e=document.getElementById('val');

            if(e){

                e.innerHTML=text;

            }

        }

    }

    function startCounting(){

        var a=getAjaxObject();

        a.onreadystatechange = updateText;

        a.open("GET", "incrementer.php", true);

        a.send(null);

        setTimeout(startCounting,1);

    }

</script>

</head>
 
<body>

    <input type="button" value="Send Object" onclick="startCounting()" />

    <div id="val">    </div>

</body>

</html>

acoder · #5 September 6th, 2008, 12:07 PM

One solution is to make 'a' global. If you don't want to do that, you can use a closure.

rizwan6feb · #6 September 7th, 2008, 01:11 PM

Quote:

Originally Posted by acoder

One solution is to make 'a' global. If you don't want to do that, you can use a closure.

I can't use global variable and i have no idea how to use a closure. Please give me sample code

acoder · #7 September 7th, 2008, 01:28 PM

Basically creating a function which returns a function, e.g.

Expand|Select|Wrap|Line Numbers

 function updateText2(a) {

    return function() {

        updateText(a);

    }

}

and calling that instead. See this link for an explanation of closures.

rizwan6feb · #8 September 8th, 2008, 04:10 AM

I have used closure, but the problem persists. Please see the code below what i am doing wrong

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script language="javascript">

    var x=0;

    function getAjaxObject(){

        try{

            ajaxRequest = new XMLHttpRequest();

        } catch (e){

            // Internet Explorer Browsers

            try{

                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

            } catch (e) {

                try{

                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

                } catch (e){

                    // Something went wrong

                    alert("Your browser doesn't support ajax!");

                    return false;

                }

            }

        }

        return ajaxRequest;    

    }

    function updateText(a){

        return function(){

            if(a.readyState==4){

                var text=a.responseText;

                var e=document.getElementById('val');

                if(e){

                    e.innerHTML=text;

                }

            }

        };

    }

    function startCounting(){

        var a=getAjaxObject();

        var fun1=updateText(a);

        a.onreadystatechange = fun1;

        a.open("GET", "incrementer.php", true);

        a.send(null);

        setTimeout(startCounting,1);

    }

</script>

</head>
 
<body>

    <input type="button" value="Start Counting" onclick="startCounting()" />

    <div id="val">    </div>

</body>

</html>

rnd me · #9 September 8th, 2008, 06:37 AM

Expand|Select|Wrap|Line Numbers

  
    function startCounting(){

        var a=getAjaxObject();

        a.onreadystatechange = function(){

            if(a.readyState==4){

                var text=a.responseText;

                var e=document.getElementById('val');

                if(e){

                    e.innerHTML=text;

                }

                a = null;

            }

        }

        a.open("GET", "incrementer.php", true);

        a.send(null);

        setTimeout(startCounting,1);

    }

rizwan6feb · #10 September 8th, 2008, 07:02 AM

Yes, that works. Great job man, thank you very much

acoder · #11 September 8th, 2008, 12:39 PM

So simple that I didn't think of. Thanks rnd me ;)

Popular Articles

What is Bytes?