javascript - 使用 Javascript 模拟进度条

Question

我想增加进度条的值。当达到最大值时，它应该停止。此代码应模拟服务器调用，用户必须等待并且应禁用输入。

function serverCall() {
    var container = $("#disabledBackgroundContainer"),
        progressBar = $("#progressBar"),
        duration = 5000,
        currentProgess = 0,
        steps = 1;

    progressBar.prop("max", duration);
    container.css("display", "block");

    currentProgess = setInterval(function () {
        currentProgess += steps;
        progressBar.val(currentProgess);

        if (currentProgess >= duration) {
            clearInterval(currentProgess);
            container.css("display", "none");
        }
    }, steps);
}

#disabledBackgroundContainer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn btnDark" onclick="serverCall()">Server Call</button>
        <div id="disabledBackgroundContainer">
            <progress id="progressBar"></progress>
        </div>

如您所见，进度条从未停止，而且我的代码中似乎出现了循环。但是我没有找到处理这个问题的正确方法。

Answer 1

您将 currentProgess 用于两种不同的用途:计时器 ID 和要检查的增量数字。

您需要为此使用两个不同的变量:

var timer = setInterval(function () {
    currentProgess += steps;
    progressBar.val(currentProgess);

    if (currentProgess >= duration) {
        clearInterval(timer);
        container.css("display", "none");
    }
}, steps);

其次，从 HTML id 属性中删除散列。应该是 id="progressBar"。散列仅具有作为 CSS 选择器的意义(在您的代码和样式部分):

function serverCall() {
    var container = $("#disabledBackgroundContainer"),
        progressBar = $("#progressBar"),
        duration = 5000,
        currentProgess = 0,
        steps = 1;

    progressBar.attr("max", duration);
    progressBar.attr("value", 2000);
    container.css("display", "block");

    var timer = setInterval(function () {
        currentProgess += steps;
        progressBar.attr('value', currentProgess);

        if (currentProgess >= duration) {
            clearInterval(timer);
            container.css("display", "none");
        }
    }, steps);
}

#disabledBackgroundContainer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btnDark" onclick="serverCall()">Server Call</button>
<div id="disabledBackgroundContainer">
    <progress id="progressBar"></progress>
</div>