Question

是否有任何选项可以提高和降低进度？有时进步需要时间，有时甚至非常缓慢地完成：

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/

Answer 1

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

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

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

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

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

通过简单地更改第二个参数的值，您可以更改每次执行函数的速度或速度，从而更改百分比增加的速度或速度。因此，如果将其设置为500，那么setInterval将在每次执行函数之前等待半秒钟。

您可以阅读其他JavaScript计时器函数here，特别是clearInterval()，您的代码在匿名函数中使用该函数来结束80.5%时的间隔。

Answer 2

我希望这会有所帮助：

$(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>

JavaScript：如何控制进度速度？

2 个答案: