用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> 

如您所见，progessbar永不停止，似乎我的代码中出现了循环。 但是我没有正确的方法来解决这个问题。

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>