I am currently facing an issue with calling a JavaScript function within an AJAX call. The progress function below is supposed to be executed every time the for loop runs. However, the problem is that although progress is being run as many times as the for loop iterates, it only executes after the rest of the code has completed.
For clarity, I will only share the essential parts of the code. All variables are properly defined and retData contains a list of objects that are accessed correctly. My main focus now is on ensuring that progress functions during the execution of the for loop and not after it.
function getAllProcess(){
$.get(processUrl, function(retData){
if (navigator.appVersion.indexOf("Win")!=-1){
windowsFillProcessTable(retData);
}else{
linuxFillProcessTable(retData);
}//end else
$('#divForProcessTable table tbody').append(processHtml);
});//end get
}
function windowsFillProcessTable(retData){
$('#divForProcessTable table tbody #processTableHeaders').append("<th>Session Name</th><th>Session #</th>");
lengthOfList = retData.list.length;
step = 100/lengthOfList;
if (retData.list.length > 0){
for (var i = 0; i < retData.list.length; i++){
numberOfLoaded++;
progress(step * numberOfLoaded, $('#progressBar'));
processHtml += '<tr><td><input type="checkbox" value="' + retData.list[i].pid + '">' + retData.list[i].pid + '</td><td>' + retData.list[i].name + '</td><td>' + retData.list[i].virtualMemorySize + '</td><td>' +
retData.list[i].user + '</td><td>' + retData.list[i].cpuTime + '</td><td>' + retData.list[i].status + '</td><td>' + retData.list[i].sessionName + '</td>' +
'<td>' + retData.list[i].sessionNumber + '</td></tr>';
}//end for
}//end if for length
else{
processHtml = '<tr><td colspan="15">There are no processes matching that expression</td></tr>';
}
}
//Loading bar action
function progress(percent, $element) {
var d = new Date();
console.log(new Date());
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}