Question

我有进度条的代码，我希望进度条重复10次，换句话说，从0％到100％，10次。我创建了一个for循环，但代码只运行一次ProgressBarSim函数。

这是脚本：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
  <script>
     var sim;
     var mm=0;
     for (i = 0; i < 10; i++) {
         var al=0;
         var t=0;
         function progressBarSim(al, t) {
            var bar = document.getElementById('progressBar');
            var status = document.getElementById('status');
            bar.value = al;
            status.innerHTML = al + "%";
            al++;
            sim = setTimeout(function(){ progressBarSim(al, t); }, 50);
            if (al == 101) {
               clearTimeout(sim);
               var al=0;
               var t=0;
            }//end if 
         }//end function
      }//end for

  </script>

  <form  name="Calculation" method="post">

  <progress id="progressBar" value="0" max="100" style="width:300px;">  </progress>
   <span id="status"></span> 
  <input type="button" id="btn2" value="Start Acquisition" onclick="progressBarSim(0, 0)">

  </form>
</body>
</html>

如何让它重演？

Answer 1

我没有看到你的for循环的需要（因为这是setTimeout所做的）而且我不确定你的t变量是做什么的，因为你似乎没有使用它可以在任何地方（可能想要摆脱它），但你可以将你的js改为以下它应该有效：

function progressBarSim(al, t) {
    var bar = document.getElementById('progressBar');
    var status = document.getElementById('status');

    bar.value = al;
    status.innerHTML = al + "%";

    al++;

    // this will call iteself up until 100 as you are passing the al var back to the same function and iterating it
    if (al < 101) {
        setTimeout(function () {
            progressBarSim(al, t); // as you are calling the function within itself, it is creating it's own loop
        }, 50);
    }
}

Example

我认为你混淆了setTimeout和setInterval。

setTimeout将在经过指定的时间后调用该函数一次，除非您想要在调用之后但在经过的时间过去之前取消该事件，否则不需要执行clearTimeout。

setInterval将连续调用该函数，在每个函数调用之间暂停指定的时间量。这里clearInterval将停止循环

根据评论更新并确定t的内容

var timesToRepeat = 10,
    timer;

function progressBarSim(al, t) {
    clearTimeout(timer); // added incase the button is clicked twice
    var bar = document.getElementById('progressBar');
    var status = document.getElementById('status');

    bar.value = al;
    status.innerHTML = al + "%";

    al++;

    // this will call iteself up until 100 as you are passing the al var in and iterating it
    if (al <= 101 && t < timesToRepeat) {
        if (al == 101) {
            al = 0;
            t++;
        }

        if (t < timesToRepeat) {
            timer = setTimeout(function () {
                progressBarSim(al, t);
            }, 50);
        }
    }
}

Updated example

Answer 2

我假设mm变量是您想要运行它的次数的计数器。 if (mm < 10)检查它是否已经运行了10次。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <script>
    var sim;
    var mm=1;
    function progressBarSim(al, t) {
            var bar = document.getElementById('progressBar');

            var status = document.getElementById('status');

            bar.value = al;

            status.innerHTML = al + "%";

            al++;
            sim = setTimeout(function(){ progressBarSim(al, t); }, 50);

            if (al == 101) {

                clearTimeout(sim);

                var al=0;
                var t=0;
                if(mm < 10)
                    progressBarSim(0, 0);
                mm++;
            }
        }


    </script>

    <form  name="Calculation" method="post">

    <progress id="progressBar" value="0" max="100" style="width:300px;">  </progress>
    <span id="status"></span>
    <input type="button" id="btn2" value="Start Acquisition" onclick="progressBarSim(0, 0)">

    </form>
</body>
</html>

JavaScript中的for循环不起作用

2 个答案: