为什么setInterval不是千毫秒? [关闭]

问题描述 投票:-4回答:2

我有这个w3school代码,我正在尝试使用。但是,我不明白为什么这个例子中的setInterval只有5而不是5000.难道它不应该是数千?如果没有,那我怎么能更快地做这个动画?因为,每当我将其减少到小数(如0.01)时,动画几乎需要与现在相同的时间!

http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

javascript html
2个回答
0
投票

这是一个初学者的问题,但不是一个愚蠢的问题;对不起,你上面有这么狡猾的评论。

我不明白为什么这个例子中的setInterval只有5而不是5000

该间隔定义了代码在再次运行之前等待的时间(以毫秒为单位) - 间隔为5000将导致它每五秒移动一次。间隔为5使其每5ms运行一次,或(理论上)每秒运行200次。但见下文......

每当我将其减少到小数时,动画几乎花费与现在相同的时间

......不考虑每次贯通期间的处理时间; setInterval仅控制运行期间的延迟量。因此,你所拥有的非常小的间隔可能会被每次运行所花费的时间所淹没;低于某一点(这将取决于用户的处理器速度)较短的间隔不会使您的代码运行得更快。

如果您希望动画看起来运行得更快,而不是尝试运行更多循环,则需要在每个循环中将对象移动得更远。这需要对代码进行两处更改:

  function frame() {
    if (pos > 349) { // <-- here
      clearInterval(id);
    } else {
      pos = pos + 2;  // <-- and here
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }

第二个变化是显而易见的 - 而不是每个循环移动项目1个像素,它将每个循环移动2个像素,使速度加倍。

第一个是防止无限循环:因为你向pos添加了更大的增量,它可能会跳过350,所以你需要避免潜在的无限循环,而不是检查pos是否大于349。


0
投票

setInterval()调用仅为5,因为您希望红色方块每秒移动多个像素。要查看方块移动的速度,请将1000(一秒)除以setInterval调用中的值。 1000/5 =每秒200像素的移动。

如果将setInterval()值更改为其他某个数字,则右侧的动画将以与之前相同的速度运行,除非您单击顶部中心的“查看结果>>”按钮。 “查看结果>>”按钮用于将修改后的代码从左侧复制到右侧。

© www.soinside.com 2019 - 2024. All rights reserved.