javascript - javascript中进度条的可见性

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 不会在请求发送到服务器时等待。这是发生了什么:

1. 进度条设置为“可见”
2. 启动了几个XMLHttpRequest
3. 进度条设置为“隐藏”
4. 一段时间后收到 XMLHttpRequest 的响应。

显然，第 3 步和第 4 步应该互换。但这里有一个解决方案:每次启动 XMLHttpRequest 时，增加一个计数器。每次收到响应时，减少它。然后检查计数器是否为0。如果为0，则加载所有资源，可以隐藏动画。