15
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!