{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Emotional °昔 的问题《Browsers keep eating memory with AJAX + setInterva》','https://www.manongdao.com/q-467652.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
Have you tried reusing the variables inside your calls? Meaning instead of making new variables where you handle the response, just use the same ones. Say
It it's really a leak, this might help the garbage collector. It would be nice to see the actual code of what you're doing though.
You will increase memory usage since you are loading more data on every request.
Clicky:
How to free memory after an Ajax request
Memory leak involving jQuery Ajax requests
Just a thought, instead of setInterval you should use setTimeout and then when it times out you set the timeout again.
That way you don't run the risk of the setInterval running off if you lose track of it for some reason:
I think also that the jquery ajax has a success callback which you can use as the point that you setTimeout. That way, as has been mentioned in this thread elsewhere, you dont end up overlapping requests.
(just checked and there is a success callback)
Have a look at this post - might help ?
How can I force Javascript garbage collection in IE? IE is acting very slow after AJAX calls & DOM manipulation
(Suggests using specific JQuery methods that apparently try to avoid memory leaks: and using a 'delete' command to try and free up space).
According to this jQuery forum thread:
you're polling sever after every second. Definitely it'll consume all of the memory. What however you can do is to set a predefined interval. Then after polling if the data is available fetch that and keep the interval same, but if after polling there is no data available yet, increment the interval to make sure next poll is delayed. This way you can reduce the load.