У меня есть 3 вызова jquery Ajax в цикле for, где в функции Success он создаст элемент Paragraph с текстом. Данные параграфа добавляются успешно, но в моем браузере он показывает данные параграфа только для завершения цикла , Пожалуйста, найдите код ниже. Пожалуйста, помогите мне в этом вопросе.
var ProcessImage = function() {
$("#div1").innerHTML = "";
for (k = 1; k <= count; k++) {
var filename = $("#image" + k).attr('alt');
var ImageName = filename.replace('.jpg', '')
var base64data = $("#image" + k).attr('src');
var fileCount = 0;
if (base64data == "#") {
alert("Please browse an image and continue...");
} else {
var Imagedata = ImageName + '&' + base64data;
$("#btnProcess").prop("disabled", true);
$("#lblData").text("");
//var fbURL="http://dummy.restapiexample.com/create";
var fbURL = "http://localhost:55156/api/Upload/"
$.ajax({
url: fbURL,
type: 'POST',
dataType: 'json',
data: {
request: Imagedata
},
async: false,
success: function(data) {
$("#div1").show();
if (data == "Success") {
$(".myText").val(filename + " - Uploaded successfully..!");
$("#div1").append("<p style='color:blue;margin-top:5px;'>" + filename + " - Uploaded successfully..!</p>");
console.log(filename + " - Uploaded successfully..!");
} else {
$("#div1").text(data);
}
$("#div1").load("#div1");
},
error: function(e) {
alert('Error: ' + e);
$("#btnProcess").prop("disabled", false);
}
});
var fbURL2 = "http://localhost:55156/api/Upload/";
$.ajax({
url: fbURL2,
type: 'POST',
dataType: 'json',
data: {
request: filename
},
async: false,
success: function(data) {
debugger;
if (data == "Success") {
$("#div1").append("<p style='color:blue;margin-top:5px;'>" + filename + " - Segmented successfully..!</p>");
console.log(filename + " - Segmented successfully..!");
} else {
$("#div1").text(data);
}
},
error: function(e) {
alert('Error: ' + e);
$("#btnProcess").prop("disabled", false);
}
});
var fbURL3 = "http://localhost:55156/api/Upload/";
$.ajax({
url: fbURL3,
type: 'POST',
dataType: 'json',
data: {
request: filename
},
async: false,
success: function(data) {
debugger;
if (data != -1) {
$("#div1").append("<p style='color:blue;margin-top:5px;'>" + data + " - Segmented files</p>");
fileCount = parseInt(data);
console.log(data + " - Segmented Files");
} else {
$("#div1").text(data);
}
},
error: function(e) {
alert('Error: ' + e);
$("#btnProcess").prop("disabled", false);
}
});
$("#div1").append("<p style='color:blue;margin-top:5px;'>Starts Processing</p>");
$("#div1").append("<p style='color:blue;margin-top:-5px;'>-----------------</p>");
for (i = 0; i < fileCount; i++) {
var status = true;
var fbURL4 = "http://localhost:55156/api/Upload/";
var SegmentedFiles = filename + '&&' + 0;
$.ajax({
url: fbURL4,
type: 'POST',
dataType: 'json',
data: {
request: SegmentedFiles
},
async: false,
success: function(data) {
debugger;
RespData = $.parseJSON(data);
if (RespData.Status == "Success") {
$("#div1").append("<p style='color:green;margin-top:5px;'>" + RespData.Result + " - Successfully recognised by Process-1</p>");
console.log(RespData.Result + " - Successfully recognised by Process-1");
$("#image" + k).attr('src', RespData.Base64str);
status = true;
} else {
$("#div1").append("<p style='color:red;margin-top:5px;'>Process-1 failed to recognise - " + RespData.Result + "</p>");
console.log("Process-1 failed to recognise - " + RespData.Result);
status = false;
}
$("#btnProcess").prop("disabled", false);
},
error: function(e) {
alert('Error: ' + e);
$("#btnProcess").prop("disabled", false);
}
});
if (status) {
continue;
}
var fbURL5 = "http://localhost:55156/api/Upload/";
var SegmentedFiles2 = filename + '&&' + i;
$.ajax({
url: fbURL5,
type: 'POST',
dataType: 'json',
data: {
request: SegmentedFiles2
},
async: false,
success: function(data) {
debugger;
RespData = $.parseJSON(data);
if (RespData.Status == "Success") {
$("#div1").append("<p style='color:green;margin-top:5px;'>" + RespData.Result + " - Successfully recognised by Process-2</p>");
console.log(RespData.Result + " - Successfully recognised by Process-2");
$("#image" + k).attr('src', RespData.Base64str);
} else {
$("#div1").append("<p style='color:red;margin-top:5px;'>Process-2 failed to recognise - " + RespData.Result + "</p>");
console.log("Process-2 failed to recognise - " + RespData.Result);
$("#image" + k).attr('src', RespData.Base64str);
}
$("#btnProcess").prop("disabled", false);
},
error: function(e) {
alert('Error: ' + e);
$("#btnProcess").prop("disabled", false);
}
});
}
$("#btnProcess").prop("disabled", false);
}
}
};