显示了ajax调用的覆盖层，但在没有ajax的情况下调用时不显示

Overlay layer shown for ajax calls but not when called without ajax

本文关键字：显示 调用 ajax 情况下 覆盖      更新时间：2023-09-26

我有一个"加载"覆盖，当我调用ajax时会显示它。这很好用。覆盖在css中定义为：

.loading{
    position:fixed;
    z-index:1010;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 255, 255, 255, .9 )
                url('http://url to image') 
                50% 50% 
                no-repeat;              
}

它在js函数中被称为

function showLoading()
{
    $("#layer").addClass("loading"); 
}

一旦ajax调用返回，我将调用一个隐藏层的hideLoading()。所有这些都很好。

现在，我在点击时有一个按钮，我在该按钮上进行客户端进程密集型计算，最后将额外的内容加载到DOM中。这个函数称为calcDataPoints()。我希望这样，当有人单击calc按钮时，我会显示覆盖，进行计算并更新DOM，然后隐藏覆盖。

所以我做了：

showLoading();
calcDataPoints();
hideLoading();

问题是覆盖永远不会被渲染。当计算"完成"而不是"之前"时，它会显示一微秒。因此，它没有达到预期的效果。

我在这里做错了什么？如何在计算开始前显示覆盖，并在计算结束并将数据写入DOM后关闭覆盖？

非常感谢任何指点！

这样调用：

setTimeout(showLoading, 10);
setTimeout(calcDataPoints, 2000);
setTimeout(hideLoading, 2000);

通过这种方式，我们可以异步调用类似的函数。

相关文章：