我想在响应通过 ajax 时更新进度条

Question

我想用每一个响应更新进度条，但有了这段代码，我一次得到了很多响应，最后一个数字更新了进度条。 但我无法在我的成功职能中得到每一个回应， 我也尝试了 async：false，但由于此响应正在获取，但进度条仅在上次响应进度条更新时更新。

function BindTable(jsondata, tableid) {
/*Function used to convert the JSON array to Html Table*/
var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/
//Random Id Generation 
var random = //Some Random Number
var i = 0;
for (; i < jsondata.length; i++) {
var jData = {};
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = jsondata[i][columns[colIndex]];
// console.log(cellValue)
jData[colIndex] = cellValue;
if (cellValue == null)
cellValue = "";
}
// console.log(jData);
var jsonData = JSON.stringify(jData);
console.log(jsonData);
$.ajax({
url: URL of PHP File,
async: true,
timeout: 30000,
data: {
"data": jsonData,
"random": random,
"current": i,
"last": jsondata.length
}, //<--- Use Object
type: "POST",
success: function (response, textStatus, hxr) {
$('.progress-bar').css('width', response + '%').attr('aria-valuenow', response);
if (response != 100)
$('#prvalue').html(response + '% Complete')
if (response == 100)
$('#prvalue').html(response + '% Complete (Success)')
console.log(response);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("The following error occured: " +
textStatus, errorThrown);
}
});
}
}

这是控制台输出： 在此处输入图像描述

ExcelUpload.js:140 20
ExcelUpload.js:140 24
ExcelUpload.js:140 4
ExcelUpload.js:140 8
ExcelUpload.js:140 16
ExcelUpload.js:140 12
ExcelUpload.js:140 44
ExcelUpload.js:140 36
ExcelUpload.js:140 40
ExcelUpload.js:140 28
ExcelUpload.js:140 48
ExcelUpload.js:140 32
ExcelUpload.js:140 72
ExcelUpload.js:140 68
ExcelUpload.js:140 56
ExcelUpload.js:140 64
ExcelUpload.js:140 52
ExcelUpload.js:140 60
ExcelUpload.js:140 84
ExcelUpload.js:140 96
ExcelUpload.js:140 88
ExcelUpload.js:140 80
ExcelUpload.js:140 92
ExcelUpload.js:140 76
ExcelUpload.js:140 100

Answer 1

您可以尝试与异步一起使用的示例代码： 您可以使用.toFixed(0)来获取整数

function BindTable(jsondata, tableid) {
var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/
//Random Id Generation 
var random = 7; //Some Random Number
var progress = 0;
for(i = 0; i < jsondata.length; i++) {
var jData = {};
for (var colIndex = 0; colIndex < columns.length; colIndex++){
var cellValue = jsondata[i][columns[colIndex]];
jData[colIndex] = cellValue;
if (cellValue == null) cellValue = "";
}
var jsonData = JSON.stringify(jData);
console.log(jsonData);
$.ajax({
url: '', //URL of PHP File,
async: true,
timeout: 30000,
data: {"data": jsonData,"random": random,"current": i,"last": jsondata.length},
type: "POST"
}).done(function(response, textStatus, hxr){
progress = progress + 1;
relative = ( progress * 100) / jsondata.length;
$('.progress-bar').css('width', relative + '%').attr('aria-valuenow', relative);
if (progress == jsondata.length){
$('#prvalue').html(relative + '% Complete (Success)')
}else{
$('#prvalue').html(relative + '% Complete')
}
console.log(response, relative);
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log("The following error occured: " + textStatus, errorThrown);
})
}
}