Question

为什么当我尝试为一个div隐藏div时操作不会消失吗？我的理解是你可以使用document.getElementById('something').style.display = "none";隐藏某些内容。然而，当我尝试在显示和隐藏它之间进行操作时，它不起作用。

＆＃13;

	function someComplicatedFunction(ms) {
        // This isn't the exact function I am using, 
        // but it has a similar form and the same problem
        let start = new Date().getTime();
        let end = start;
        while (end < start + ms) {
            end = new Date().getTime();
        }
    }
    
    function hideTheOtherDiv() {
    	document.getElementById('div1').style.display = "none";
        document.getElementById('div2').style.display = "initial";
        console.log("Start");

        someComplicatedFunction(3000);
        
        console.log("end");
        document.getElementById('div1').style.display = "initial";
        document.getElementById('div2').style.display = "none";
    }
    
    document.getElementById('div2').style.display = "none";

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div id="div1">One</div>
<div id="div2">Two</div>
<button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">


</script>

</html>

＆＃13;

Answer 1

使用setTimeout()方法代替someComplicatedFunction()方法。

由于 JavaScript只有一个线程，因此将执行方法异步，因此当脚本是时，网页将无响应运行。这就是我们在使用时无法看到数据变化的原因完成dom操作的someComplicatedFunction()方法在ms内，页面在执行该方法时无响应持续3秒。

＆＃13;

function hideTheOtherDiv() {

  document.getElementById('div1').style.display = "none";
  document.getElementById('div2').style.display = "initial";
  console.log("Start");

  setTimeout(function() {
    console.log("end");
    document.getElementById('div1').style.display = "initial";
    document.getElementById('div2').style.display = "none";
  }, 3000);
}

document.getElementById('div2').style.display = "none";

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <div id="div1">One</div>
  <div id="div2">Two</div>
  <button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">
</script>

</html>

＆＃13;

Answer 2

function hideTheOtherDiv() {
    document.getElementById('div1').style.display = "none";
    document.getElementById('div2').style.display = "initial";

    setTimeout( function() {
        document.getElementById('div1').style.display = "initial";  
        document.getElementById('div2').style.display = "none";
    }, 3000);
}

为什么div不会消失？

2 个答案: