按钮单击延迟以显示进度 div

Question

每次我单击准备结果按钮时，进度div都不会立即显示，而是需要一些时间才能显示。

http://beta.east-west.world/data

--Javacript

("#preview").click(function ()
{
$('#divloading').show();
});
<div id="divloading" style="display: none; text-align: center; width: 10000px" class="LoadingClass">
<center>
<div class="chart-container" id="chart"></div>
</center>
</div>

div 应该立即显示，但它被延迟了。

Below is what is logged  for   $('#divloading').show();
> 22:8:20:424 Test Click Time:End:
> 22:8:20:423 Test Click Time:Start:
> 22:8:9:506 Test Click Time:End:
> 22:8:9:504 Test Click Time:Start:

Answer 1

我在你的代码中找到了 ajax...这意味着您向服务器发送请求！也意味着它不完全是用户端操作，而是使用互联网！因此，从服务器获取结果需要时间是正常的。

但是您必须担心的是它显示加载页面然后消失并再次出现的故障！

编辑：

这是单击时触发的代码...这个函数在它的末尾被调用，其中包含一个 ajax 请求：Report_Comparison((;

$("#preview").click(function ()
{
$('#divloading').show().delay(0);
$('#ErrorWhileReportGeneration').html("");
var _GreaterOrSmaller = "<";
if ($("#rdo_sectorlargerthan").is(':checked') == true) {
_GreaterOrSmaller = "" + ">";
}
if ($("#PartnersCountries").val() == null) {
$('#divloading').hide();
jAlert('Please select a partner country');
return false;
}
if ($("#CompareCountryList").val() == null) {
$('#divloading').hide();
jAlert('Please select a country to compare');
return false;
}
if ($("#IncludeComparisonInReport").is(':checked') == false) {
$('#divloading').show();
$("#report-table-container").show();
_data = [];
_Categoryies = [];
_PointData = [];
_AllData = [];
if (SimpleReport() == false) {
return false;
}
}
else {
$("#report-table-container").hide();
$('#divloading').hide();
jAlert("Include - Level 2 Selection work in development phase");
return false;
}
$('#divloading').show();
Report_Comparison();
return false;
});