JavaScript:如何控制进度速度？

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% 时，您的代码在匿名函数中使用它来结束间隔。