Question

我在html css中有一个简单的循环加载栏，它在开头就隐藏了。点击后，我调用一个javascript函数，迭代并在服务器上发送ajax调用。我试图在循环之前将可见性设置为true。一个完成后，我需要再次设置false的可见性。这是我的代码：

<div class="sk-fading-circle" style="visibility: hidden" id="loading">
    <div class="sk-circle1 sk-circle"></div>
    <div class="sk-circle2 sk-circle"></div>
    <div class="sk-circle3 sk-circle"></div>
    <div class="sk-circle4 sk-circle"></div>
    <div class="sk-circle5 sk-circle"></div>
    <div class="sk-circle6 sk-circle"></div>
    <div class="sk-circle7 sk-circle"></div>
    <div class="sk-circle8 sk-circle"></div>
    <div class="sk-circle9 sk-circle"></div>
    <div class="sk-circle10 sk-circle"></div>
    <div class="sk-circle11 sk-circle"></div>
    <div class="sk-circle12 sk-circle"></div>
</div>

这里是javascript：

function visible(id, flag){
    if (flag == 1){
        document.getElementById(id).style.visibility = 'visible';
    }
    else if (flag == 0){
        document.getElementById(id).style.visibility = 'hidden';
    }
}

function sendRequest(urls) {

    if (urls.length == 0) {
        return;
    } else {
        var A = urls.split(',');
        visible('loading', 1);
        for (var i = 0; i < A.length; i++) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var result_set = JSON.parse(this.responseText);
                    if (result_set.flag == 1) {
                        visible('stock-table', 1);
                        insertRow('stock-table', result_set.url, result_set.title);
                    }
                }

            };
            xmlhttp.open("GET", "scrapper.php?url=" + A[i], true);
            xmlhttp.send();
        }
        visible('loading', 0);

    }

}

我在这里做错了什么？

Answer 1

此处的问题是XMLHttpRequest 异步。这意味着javascript在请求发送到服务器时不会等待。这就是：

进度条设置为＆＃34;可见＆＃34;
启动了几个XMLHttpRequest
进度条设置为＆＃34;隐藏＆＃34;
一段时间后收到XMLHttpRequest s的回复。

显然，应该交换第3步和第4步。但是，这是一个解决方案：每次启动XMLHttpRequest时，会增加一个计数器。每次收到回复，请减少回复。然后检查计数器是否为0.如果为0，则加载所有资源并隐藏动画。

javascript中进度条的可见性

1 个答案: