javascript - 当JS在后台运行时隐藏一个元素然后再次显示

Question

基本上，这就是我想要做的:

1. Hide element1
2. Run JS function relating to element1
3. Show element1

目的是当JS在后台修改该元素时，不向用户显示该元素，并且一旦执行JS函数，就再次显示该元素。这样用户就看不到发生的所有更改。

那么，是否可以根据完成执行的 JS 函数来更改元素的 CSS？

上下文:

我正在我们的网站上运行对照和实验之间的测试。网站加载页面，然后触发我的测试代码(我上面讨论的 JS)。因此，用户会看到正常的网站，然后它消失，他们会看到在最终加载测试之前发生的更改。从用户体验的 Angular 来看，这很糟糕，所以我的计划是让所有内容都显示为空白，直到最终版本加载 - 因此出现了问题。

Answer 1

$('#container').hide();
var content='';
for(var i=0;i<10;i++)
{
content+='<tr><td> Row No'+(i+1)+'</td><td> User'+(i+1)+'</td></tr>';
}
$('#tbl').append(content);
$('#tbl tr:gt(5)').remove();

$('#btnShow').click(function(){
$('#container').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='container'>
<table id='tbl'>
<tr><td> Row Number</td> <td> User Name</td>
</tr>
</table>
</div>
<input type="button" value="Show UI" id="btnShow"/>

代码是 self 解释的。将您的内容包裹到父 div 下，在所有渲染之前将其隐藏，然后在准备好时再次显示父 div!!!