为 ajax 调用显示覆盖层，但在没有 ajax 调用时不显示

Question

当我进行 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 后将其关闭？

任何指针都非常感谢！

Answer 1

这样称呼：

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

这样我们就可以异步调用函数了。