Question

我试图在按下按钮后使CSS Rotator（Loader）可见。然后进行处理，然后隐藏Rotator。但是似乎在处理display：block属性时已设置但不可见（请参阅控制台日志）。我该如何存档？感谢您的帮助！

简化的代码示例：

<!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>

Answer 1

我只是觉得你：

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

让您的页面比较冗长，因为它要花费很多时间并且无法更新。真的不知道为什么。

但是，如果您尝试等待计时器，它就可以工作了：

<!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");
            setTimeout(
	       function() 
		   {
		      $('#loader').css("display","none");
	           }, 1000
		);
           
             }



        $(document).ready(function() {

            $('#loader').hide(); 
            $('#test_btn').click(test);

        }); 
    </script>
</head>

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

</html>

Answer 2

在您的JS执行停止之前，浏览器不会更新DOM或更改样式（这是通过setTimeout实现的。请参见下面的代码）。这意味着，如果您设置一些element.style。[...] =“ ...”，它将在您的代码完成运行之前完全启动（或者完全停止运行，或者因为浏览器认为您正在执行允许它的操作）拦截处理几毫秒）。

JS：

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);
});

HTML：

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

我建议您阅读@Mike'Pomax'Kamermans Here
给出的答案

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

2 个答案: