Javascript CSS显示属性已设置，但在代码运行时不可见_Javascript_Jquery_Css

Javascript CSS显示属性已设置，但在代码运行时不可见

javascript jquery css

Javascript CSS显示属性已设置，但在代码运行时不可见,javascript,jquery,css,Javascript,Jquery,Css,我试图使CSS旋转器（加载器）在按下按钮后可见。然后处理一些东西，然后隐藏旋转器。但是，在处理显示时，似乎设置了阻断阿曲布他但不可见（请参阅控制台日志）。我怎么能把这个存档？谢谢你的帮助简化代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflar

我试图使CSS旋转器（加载器）在按下按钮后可见。然后处理一些东西，然后隐藏旋转器。但是，在处理显示时，似乎设置了阻断阿曲布他但不可见（请参阅控制台日志）。我怎么能把这个存档？谢谢你的帮助

简化代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />           
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>

        function test(){

            $('#loader').css("display","block");

            console.log($('#loader').css("display"));

            do_something();

            console.log($('#loader').css("display"));

            $('#loader').css("display","none");

            console.log($('#loader').css("display"));

        }

        function do_something(){
            for (var i=0; i<=10E9; i++){

            }
        }

        $(document).ready(function() {

            $('#loader').css("display","none"); 
            $('#test_btn').click(test);

        }); 
    </script>
</head>

<body>
    <div id="loader">Loader</div>
    <button id="test_btn">test</button>
</body>

</html>


功能测试（）{
$（'#loader'）.css（“显示”、“块”）；
log（$（'#loader'）.css（“display”）；
做某事；
log（$（'#loader'）.css（“display”）；
$（'#loader'）.css（“显示”、“无”）；
log（$（'#loader'）.css（“display”）；
}
函数do_something（）{
对于（var i=0；i我只是认为：
for (var i=0; i<=10E9; i++){
}

（变量i=0；i）的
浏览器不会更新DOM或更改样式，直到您的JS执行停止（这是我们使用setTimeout实现的。请参阅下面的我的代码）。这意味着，如果您设置了一些元素。style.[…]=“…”，它将在您的代码运行完之前启动（要么是完全的，要么是因为浏览器看到您正在做一些事情，让它拦截处理几毫秒）
JS:
函数显示（）{
$（'#loader'）.css（“显示”、“块”）；
}
函数hide（）{
$（'#loader'）.css（“显示”、“无”）；
}
函数newTest（）{
show（）；
设置超时（（）=>{
做某事；
隐藏（）；
}, 50);
}
函数do_something（）{
for（var i=0；i indet-在实数中，它通过一个大数组循环执行一些操作。循环需要几秒钟才能完成。这就是为什么我需要加载程序CSS…为了简化，我使用了：for（var i=0；i发生的情况是属性被修改，但由于2条指令之后您执行了一项长任务，浏览器从来没有时间应用视觉调整。我如何给浏览器提供视觉调整的时间？time setTimeout很重要-在我的情况下，加载程序在第一次单击时超时为0，但在第二次单击时超时为不是。我将超时时间增加到1000以进行可靠的DOM更新。但是谢谢你的帮助回答！你是对的@starcd，在setTimeout time 0的情况下，有时它工作不正常。
function show() {
    $('#loader').css("display", "block");
}

function hide() {
    $('#loader').css("display", "none");
}

function newTest() {
    show();    
    setTimeout(() => {
        do_something();
        hide();
    }, 50);
}

function do_something() {
    for (var i = 0; i <= 1000; i++) {
        console.log('i ', i);
    }
}

$(document).ready(function () {
    $('#loader').css("display", "none");
    $('#test_btn').click(newTest);
});

<div id="loader">Loader</div>
<button id="test_btn">test</button>