步骤1.背景 我目前有一个工作查询系统，用于动态更新后端系统的订单。请求更新时，将创建一个表，然后在收到订单状态时更新该表。 1.我查询从MySQL打开的订单数量，然后根据此信息创建表格。关键因素是div，其中包含需要更新的订单信息（updateref） 2.加载页面时，脚本用于调用执行实际订单查询和可能更新的页面。
订单列表代码段： 用法：使用PHP和MySQL获取需要更新到表的订单。可以有0到多个更新，通常是ca. 15-30更新/ rows / div元素。
while($row = $results->fetch_assoc()) {
print '<tr><td>'.$row['reference'].'</td><td><div id="updateref'.$row['reference'].'"><h6>Update queued</h6></div></td></tr>';
}
更新列表的脚本： 用法：为每个div获取更新后的状态（使用orders_updatestatus.php和上面创建的div参考）。
<script type="text/javascript">
// Update status for each order
$("[id^=updateref]").each(function(index, element) {
$.ajax({
'url': "orders_updatestatus.php?reference=" + element.id.replace(/\D/g, ""),
'success': function(data) {
element.innerHTML = data;
}
});
});
</script>
请注意，到目前为止，一切都很好！
步骤2.需要什么 我需要创建一个进度条，在每个div完成时动态更新（当使用上面提到的脚本将它们替换为orders_updatestatus.php时）
进度条脚本： 我使用标准的Bootstrap进度条，它是静态的。
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>
上面的脚本显示了我需要的进度条的类型，但是我需要将其设置为动态，如更新宽度：xx％时更新每个div元素。
我在想的是我需要为每个div元素添加一个计数器，然后添加它们，然后根据那个然后作为新宽度输入到进度条的百分比计算一个百分比。
此外，似乎有很多人提出了与进度条相关的类似问题，但其他问题几乎没有任何答案。因此，非常感谢任何帮助，谢谢。
更新 - 几乎工作！ 哇，非常感谢你帮助@ Roamer-1888，我几乎让动态进度条工作了！
// Then aggregate `promises` using $.when()
$.when.apply($, promises)
// .then's callback will fire when all the promises have successfully settled.
.then(function() {
// Set up truthy (completed query)
var spans = $( "span" );
var completed = elements.reduce(function(runningTotal, div) {
if($("h6").find(spans).css( "color", "yellow" )) { // some jQuery expression that returns truthy for "completed", otherwise falsy.
return runningTotal + 1;
} else {
return runningTotal;
}
}, 0);
var n = $("[id^=updateref]").length; // total number of "order" divs
$progressBar.css({width: (100 * completed / n)+"%"}, 100);
});
从上面的代码中可以看出，我使用span和h6标签作为'thruthys'。 工作原理： - 进度条从0到100％（计算正在运行） 问题/什么不起作用： - 只有在每次查询（~30）完成后才会进行更新。我在代码中添加了一个.css（“color”，“yellow”）作为调试，它确认完成的查询（h6标签）中的文本颜色只有在加载了所有查询后才会变为黄色。
总而言之，我仍然需要的唯一事情就是在其中一个查询完成后立即更新，而不是更新（将文本颜色更改为黄色和进度条更新）仅发生一次。也许在.when.apply中有一个小故障吗？
更新 - 仍然存在一个故障 我在进度条中添加了一个id标签，然后检查完成的数字是否正确更新，因为这是进度条本身的关键要素。
document.getElementById("progressbar").innerHTML = n + " / " +completed;
问题是，只要29个测试订单中的第一个获得更新，完成的数字将转到29/29并且进度条跳到100％，但是所有29个行都需要几秒钟更新。这是非常奇怪的，因为if（$（“h6”）。find（spans）-code无法找到任何h6或span标签，因为它们是在几秒钟后创建的。
到底是怎么回事？ ： - /
第三次更新
好吧，就像之前一切都近乎工作，除了上面描述的故障。
这是我目前的代码：
// First, create an array from the jQuery collection returned by $("[id^=updateref]").
var $progressBar = $('.progress-bar');
var elements = $("[id^=updateref]").get();
var n = elements.length;
// Set up truthy (completed query)
var spans = $( "span" );
// Then map `elements` to an array of jQuery promises; each promise deriving an $.ajax() request.
var promises = elements.map(function(element) {
return $.ajax({
'url': "orders_updatestatus.php?reference=" + element.id.replace(/\D/g, ""),
'success': function(data) {
element.innerHTML = data;
// here use `Array.prototype.reduce()` to scan the elements and summate those that are "completed"
var completed = elements.reduce(function(runningTotal, div) {
if ($("span").find("h6").css({"color": "red", "border": "2px solid red"})) { // some jQuery expression that returns truthy for "completed", otherwise falsy.
return runningTotal + 1;
} else {
return runningTotal;
}
}, 0);
document.getElementById("progressbar").innerHTML = n + " / " +completed;
$progressBar.css({width: (100 * (completed / n))+"%"});
}
});
});
代码现在在正确的时间更新所有29个订单单元格（边框为红色），如果我从进度条内的runningTotal中删除+1，则进度条不会移动。 因此，我得出结论，计算runningTotal的if -statement正在运行。但是，在更新甚至创建之前，完成的计数会增加。
为了确保这不是缓存问题，我在标题中添加了以下缓存参数，以防万一。虽然没有运气。
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
@ Roamer-1888，如果你或其他任何人可以在这件事上得到更多的帮助，我会非常感激。谢谢。
您的不确定性似乎是知道完整轮异步更新的完成时间。
很难给出明确的答案，因为尽管你付出了最大的努力，但问题却相当粗略。
假设我对这个问题的理解是正确的，这里有一个详细说明一般方法的大纲......
// First, create an array from the jQuery collection returned by $("[id^=updateref]").
var elements = $("[id^=updateref]").get();
var n = elements.length; // total number of "order" divs
// Then map `elements` to an array of jQuery promises; each promise deriving an $.ajax() request.
var promises = elements.map(function(element) {
return $.ajax({
'url': "orders_updatestatus.php?reference=" + element.id.replace(/\D/g, ""),
'success': function(data) {
element.innerHTML = data;
}
});
});
// Then aggregate `promises` using $.when()
$.when.apply($, promises)
// .then's callback will fire when all the promises have successfully settled.
.then(function() {
// here use `Array.prototype.reduce()` to scan the elements and summate those that are "completed"
var completed = elements.reduce(function(runningTotal, div) {
if($(div).find(...)..???... == ???) { // some jQuery expression that returns truthy for "completed", otherwise falsy.
return runningTotal + 1;
} else {
return runningTotal;
}
}, 0);
$('#myProgressBar')... ??? ...(100 * completed / n); // some jQuery/bootstrap expression that updates the progress bar.
});
据我所知，这是可以获得的信息。缺少的...???...部分对你来说应该是相当微不足道的。它们只是标准的同步javascript / jQuery。
编辑1
要在每个ajax响应到达时更新进度条，只需在var completed = elements.reduce(...)成功处理程序中移动$.ajax() etc块。
// First, create an array from the jQuery collection returned by $("[id^=updateref]").
var elements = $("[id^=updateref]").get();
var n = elements.length;
// Then map `elements` to an array of jQuery promises; each promise deriving an $.ajax() request.
var promises = elements.map(function(element) {
return $.ajax({
'url': "orders_updatestatus.php?reference=" + element.id.replace(/\D/g, ""),
'success': function(data) {
element.innerHTML = data;
// here use `Array.prototype.reduce()` to scan the elements and summate those that are "completed"
var completed = elements.reduce(function(runningTotal, div) {
if($("h6").find(spans).css( "color", "yellow" )) { // some jQuery expression that returns truthy for "completed", otherwise falsy.
return runningTotal + 1;
} else {
return runningTotal;
}
}, 0);
$progressBar.css({width: (100 * completed / n)+"%"}, 100);
}
});
});
// Optionally, aggregate `promises` using $.when()
$.when.apply($, promises)
// .then's callback will fire when all the promises have successfully settled.
.then(function() {
// if required, display a "complete" message.
});
编辑2
幸运的是，它就像......一样简单
// First, create an array from the jQuery collection returned by $("[id^=updateref]").
var elements = $("[id^=updateref]").get();
var n = elements.length;
// Then map `elements` to an array of jQuery promises; each promise deriving an $.ajax() request.
var promises = elements.map(function(element) {
return $.ajax({
'url': 'orders_updatestatus.php?reference=' + element.id.replace(/\D/g, ''),
'success': function(data) {
element.html(data);
var n_ = $(elements).find('h6 span').css('color', 'yellow').length;
$progressBar.css({width: (100 * n_ / n) + '%'}, 100);
}
});
});
// Optionally, aggregate `promises` using $.when()
$.when.apply($, promises)
// .then's callback will fire when all the promises have successfully settled.
.then(function() {
// if required, display a "complete" message.
});
我不确定.find('h6 span')选择器是否正确，因为我没有看到插入的HTML。您可能需要调试该位。
只有当所有元素都包含<h6><span>...</span></h6>（或任何正确的）时，进度条才会变为100％。