I have a jQuery script that uses an Ajax call to pull data from a database for about 10 different html tables. The script is repeatedly looped with a 1 minute interval and all data is retrieved from the MySQL database within 5 seconds.
9 out of 10 runs the script finishes and all tables are updated. But that 1 time the script freezes half way and only refreshes 6 or 7 tables. I then refresh the full page to get up-to-date data.
Using the JavaScript console I've managed to analyze where the script freezes and noticed that it freezes near the end, after retrieving most of the data except for 1 or 2 tables. Since Ajax handles the requests asynchronously it's not always the same data that breaks the script.
My first thought was that either Apache or the MySQL database gets too many requests and the PHP script doesn't return data, freezing the jQuery script.
At this point the webpage is only used by about 4 people. But in the future as much as 50 people will most likely use it and I'm afraid that this much requests might break the entire site.
Here's part of the console log for 1 run:
"[15:01:44.283] start" refresh.js:50
"[15:01:44.289] refresh data: timeframe" refresh.js:57
"[15:01:44.292] refresh data: tickets_agent" refresh.js:57
"[15:01:44.296] refresh data: tickets_type" refresh.js:57
"[15:01:44.298] refresh data: tickets_status" refresh.js:57
"[15:01:44.299] refresh data: tickets_prio" refresh.js:57
"[15:01:44.300] refresh data: tickets_critical" refresh.js:57
"[15:01:44.302] refresh data: tickets_high" refresh.js:57
"[15:01:44.302] refresh data: tickets_resolved_agent" refresh.js:57
"[15:01:44.303] refresh data: tickets_resolved_group" refresh.js:57
"[15:01:44.304] refresh data: tickets_new" refresh.js:57
"[15:01:44.305] refresh data: changes_group" refresh.js:57
"[15:01:44.476] update data: timeframe" refresh.js:66
"[15:01:44.656] update data: tickets_critical" refresh.js:66
"[15:01:44.689] update data: tickets_high" refresh.js:66
"[15:01:44.936] update data: tickets_prio" refresh.js:66
"[15:01:44.938] update data: tickets_resolved_group" refresh.js:66
"[15:01:44.965] update data: tickets_resolved_agent" refresh.js:66
"[15:01:45.106] update data: changes_group" refresh.js:66
"[15:01:45.174] update data: tickets_status" refresh.js:66
"[15:01:45.179] update data: tickets_new" refresh.js:66
"[15:01:46.538] update data: tickets_type" refresh.js:66
"[15:01:47.114] update data: tickets_agent" refresh.js:66
"[15:01:47.257] finish" refresh.js:74
As you can see the script starts at 15:01:44 and finishes at 15:01:47. So it takes about 4 seconds to pull all the required data from the database - where refresh data = "pull data from SQL database" and update data = "update the html table" - and it doesn't always update in the same order it refresh-es. Sometimes it freezes after update data: changes_group, sometimes it freezes after update data: tickets_status.
What else can I do to find the reason why the script freezes, preventing subsequent requests and requiring the user to reload the entire page?
=== update: here's the jQuery code
$(document).ready(function() {
var seconds = 60;
var timeout = seconds * 1000;
var items = [ 'timeframe',
'tickets_agent',
'tickets_type',
'tickets_status',
'tickets_prio',
'tickets_critical',
'tickets_high',
'tickets_resolved_agent',
'tickets_resolved_group',
'tickets_new',
'changes_group'];
load();
$(".datepick").change(function() {
process();
});
$("#datepickerReset").click(function() {
process();
});
function getNow() {
var d = new Date();
var h = ("0"+d.getHours()).slice(-2);
var m = ("0"+d.getMinutes()).slice(-2);
var s = ("0"+d.getSeconds()).slice(-2);
var ms = d.getMilliseconds();
var t = h + ":" + m + ":" + s + "." + ms;
var ts = "[" + t + "] ";
return ts;
}
function load() {
$("#progressbar").animate({ width: "100%" }, timeout, "linear", function() {
process();
});
};
function process() {
var timestamp = getNow();
console.log(timestamp + "start");
var n = items.length;
$("#progressbar").stop().css({ width: "0" });
$("#loading").fadeIn(200);
$.each( items, function( key, item ) {
var timestamp = getNow();
console.log(timestamp + "refresh data: " + item);
$.ajax({
url: "view/jquery/refresh.php",
type: "post",
data: { item : item },
dataType: "html"
})
.done(function(data) {
var timestamp = getNow();
console.log(timestamp + "update data: " + item);
$("#" + item).animate({ opacity: "0.4" }, 100).promise().done(function() {
$("#" + item).html(data).animate({ opacity: "1" }, 100);
n -= 1;
if (n === 0) {
$("#loading").fadeOut(200);
var timestamp = getNow();
console.log(timestamp + "finish");
load();
};
});
});
});
};
});
ps: I have considered using async: false in the Ajax call, but then the console shows a warning about the option being depricated. And it makes the whole script take nearly 10 seconds longer to complete.
