1

有没有办法增加和减少进度的速度？有时进步需要时间，有时完成很慢：

var value = 0,
    interval = setInterval(function() {
      value = ((+value) + .1).toFixed(1);
      if(value == 80.5) clearInterval(interval);   
      $('p').html(value+'%');
    },2);

http://jsfiddle.net/sweetmaanu/zjdBh/13/

4

2 回答 2

2

您会注意到您的代码正在使用setInterval(). 此全局 JavaScript 函数用于以给定的时间间隔定期执行代码。它的典型用法需要两个参数（这是您在此处使用它的方式）。它返回一个唯一的 ID，可用于识别您的特定区间函数（因为可以同时设置多个）。

第一个参数是要在间隔上执行的函数。您的函数是匿名函数：

function() {
    value = ((+value) + .1).toFixed(1);
    if (value == 80.5) clearInterval(interval);   
    $('p').html(value + '%');
}

此功能将增加每次执行的百分比进度。

第二个参数是一个整数，表示在执行第一个参数的函数之前要经过的毫秒数（千分之一秒）。我相信这是您问题的关键部分。您的代码有2（在您发布的代码的最后一行），因此它将在执行您的函数之前等待 2 毫秒（这会增加进度百分比），然后它将再等待 2 毫秒，然后再次执行相同的函数，等等。

通过简单地改变第二个参数的值，你可以改变你的函数每次执行的快慢，这改变了你的百分比增加的快慢。因此，如果您将其设置为500，则setInterval在每次执行该函数之前都会等待半秒。

您可以在此处阅读有关其他 JavaScript 计时器函数的信息，尤其是关于clearInterval()您的代码在匿名函数中使用它来在您到达时结束间隔的信息80.5%。

于 2013-05-21T16:18:45.643 回答
0

我希望这有帮助：

$(function(){
    var value1 = 0;
    var value2 = 0;
    var span1 = $('#val1');
    var span2 = $('#val2');
    var interval1 = setInterval(function(){
        span1.text(++value1);
        if (value1 === 80) {
            clearInterval(interval1);   
            clearInterval(interval2);
            interval1 = null;
            interval2 = null;
            span2.text(5);
        }
    }, 100); // you can change speed here
    var interval2 = setInterval(function() {
        span2.text(value2++ % 10);
    }, 70);
});

HTML：

<body>
<div class="progress-bar"></div>
<hr>
<p><span id="val1">0</span>.<span id="val2">1</span>%</p>
</body>
于 2013-05-21T17:19:41.950 回答