Question

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

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

Answer 1

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

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

Answer 2

这是一个初学者的问题，但不是一个愚蠢的问题;对不起，你上面发表了如此讽刺的评论。

我不明白为什么这个例子中的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，所以你需要避免潜在的无限循环，而不是检查是否{{1} }大于349。

为什么setInterval不是千毫秒？

2 个答案: