Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browsers keep eating memory with AJAX + setInterval

Tags:

People also ask

Does AJAX need cookies?

We are required to set cookies with AJAX requests or in such a way that any AJAX request sends those cookies to the server. One thing to note here is that every AJAX request made to any remote server automatically sends all our cookies to that very server without us having to do anything.

Is there a way to limit the time an AJAX call will run?

Not possible. It's the browser's responsibility.

Is usage of AJAX secure?

Ajax is not inherently secure or insecure. It does however open up 'opportunities' for insecure code.


I need to update a lot of data within a given interval with JavaScript. The problem is, no matter of what JS library i use (even bare-bone js), that all browsers seem to allocate memory on every AJAX request and are not able to free it afterwards. Here is a sample snipped that should reproduce the error:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Memleak Test</title>
            <meta charset="utf-8" />
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
            <script type="text/javascript">

                function readData() {
                    $.getJSON('data.php');
                }

                $(document).ready(function() {
                    setInterval(readData, 1000);
                });
            </script>
        </head>
        <body>
            <div id="content"></div>
        </body>
    </html>

An equivalent test page is available at jsbin

Here is more info on this:

  • I also tried to put the readData() function as a closure directly in the setInterval() call. This doesn't seem to make any difference.
  • I use jQuery here, but any other Library would produce the same errors.
  • My data.php script just produces a fake JSON-Object with json_encode() in PHP.
  • I know that one second is a short timeframe here, in my production script the timeframe is 30 seconds. I just wanted to see the effect quicker (in the production app it takes hours but then the memory is full too).
  • The problem here is that the app will be open 24/7.

It seems so simple that I think I'm doing something really wrong here, it would be great if some of the JS gurus in here can help me out!