Reputation: 1
I am displaying a graph using jQplot to monitor data. To refresh the div holding the graph, I invoke an ajax call every 5 seconds (see JavaScript excerpt below). On the server, a PHP script retrieves the data from a database. On success, the ajax call is reinvoked after 5 seconds with a JavaScript setTimeout(ajax,5000). On error, the ajax call is retried 10 times with setTimeout(ajax,5000) before displaying an error message. Monitoring XHR learns that the browser crashes after approximately 200 requests. As a temporary remedy, a location.reload() is issued after 50 iterations to prevent the browser from crashing. This works, but is not an ideal situation. Any better solution to this problem is very much appreciated.
Thanks and regards, JZB
function ajax() {
$.ajax({
cache: false,
url: 'monitor.php',
data : { x: id },
method: 'GET',
dataType: 'json',
success: onDataReceived,
error: onDataError
});
function onDataReceived(series) {
$('#chartdiv_bar').html('');
$.jqplot('chartdiv_bar', [series['initHits']], CreateOptions(series,'Inits'));
errorcount = 0;
setTimeout(ajax, 5000);
}
function onDataError(jqXHR, textStatus, errorThrown) {
errorcount++;
if (errorcount == 10) {
alert("No server response:\n\n" + textStatus + "\n" + errorThrown);
} else {
setTimeout(ajax, 5000);
}
}
}
Upvotes: 0
Views: 2253
Reputation: 1
I removed the jqplot call as suggested and the problem disappeared.
Apparently jqplot is the culprit and I found numerous entries referring to jqPlot memory leaks.
I use jQuery 1.6.4 and installed jqPlot Charts version 1.0.0b2_r792 which supposedly addresses memory leak issues.
Furthermore, I replaced
$('#chartdiv_bar').html('');
with
$('#chartdiv_bar').empty();
Thank you for your support.
Upvotes: 0
Reputation: 91
Since you're re-calling ajax() after a good or fail ajax call, you're starting multiple timers. This is why your browser is crashing.
you may want to try to clear the current timer and then start the next timer
var t; //global
In each of your call back functions:
if(t)
clearTimeout(t);
t = setTimeout(ajax, 5000);
more info on timer here: w3 school
Upvotes: 1