Question

我有一个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保持隐藏状态！这怎么可能以及如何解决？

Answer 1

如果你想用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>

享受

同一个函数中的多个dom更新

1 个答案: