javascript - 同一功能中的多个dom更新

我有一个JavaScript函数，从其中包含的指令的开始到结束，要花一些时间才能执行。在执行期间，我想显示一个div元素，然后在执行之后，我想隐藏它。我写了这个简单的代码片段，但是不起作用：

<div style="height: 100px; width: 100px; background-color: red; display: none;" id="d"></div>

<script>

    document.getElementById('d').style.display='block';
    console.log('start');

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","http://www.google.com",false);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    try{
        xmlhttp.send();
    } catch (e) {

    }

    var response = xmlhttp.responseText

    document.getElementById('d').style.display='none';
    console.log('finish');
</script>

如果您查看控制台，则会看到“开始”和“完成”语句之间有一个间隔，但是div保持隐藏状态！这怎么可能以及如何解决？

最佳答案

如果您想用jQuery（http://jquery.com/）简化生活
请执行下列操作：
1.在页面中包含jQuery
2.执行以下操作：

<div style="height: 100px; width: 100px; background-color: red; display: none;" id="d"></div>
<script>
    $("#d").show();
    $.ajax({
        type:'POST',
        url:'http://www.google.com',

        success: function(data) {
        //code on successful response
        },
        error: function(xhr) {
        // code on error response
        },
        complete:function(){
         // code on  - success/failure
         $("#d").hide();
        }
    });
</script>

请享用

关于javascript - 同一功能中的多个dom更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27643294/