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

我有一个“加载”覆盖图，当我进行ajax调用时显示。这工作正常。叠加在CSS定义为：为Ajax调用显示覆盖层，但不调用时没有Ajax调用

.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();

的问题是覆盖永远不会被渲染。当calc已经“完成”而不是“之前”时，它显示微秒。所以它没有预期的效果。

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

任何指针非常感谢！

来源

2015-12-03 Undefined Variable

建议看[This]（http://stackoverflow.com/questions/5187968/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-其他）的答案。 –

你可以发布你正在运行的完整代码吗？ – adriancarriger

电话这样的：

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

这样，我们可以调用像异步。

来源

2016-06-30 21:21:02

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

回答

相关问题