加速setInterval

Question

我知道在javascript的setInterval方法中至少有1毫秒。我能更快地完成这个任务吗？比如使用微秒？

我需要的是：

我制作了一个画布css/js动画。这是一行简单的代码，它变成了一个解药，然后又回到了一行。我有一个滑块来调整这个动画的速度。所以最低的滑块值是非常快的，最高的滑块值是非常慢的。这可以理解吗？谢谢!

Answer 1

更新：

请注意，在编写此答案时，问题是：

我知道在javascript中的setInterval方法中至少有1毫秒。我能更快地完成这个任务吗？比如使用微秒？

后来对它进行了编辑，以包括有关画布动画的信息，使用该新信息，正确的答案将是使用window.requestAnimationFrame方法：

function step(timestamp) {
  // do something for every frame
  window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

每次调用step回调时，它都会获得一个精度为1微秒的DOMHighResTimeStamp时间戳作为参数，每次刷新屏幕时都会调用一次(不需要更频繁地绘制任何内容，因为它无论如何都不会显示)。

最初的问题是关于加速setInterval方法的，我最初的回答是关于通常比the minimum delay of setInterval允许的更频繁地做任何事情(根据the WHATWG specification，8.4 Timers部分，大于5的嵌套级别是4ms，或者根据this post by James Robinson和历史上的it used to work differently，对于4或更高的嵌套级别是4ms )。

原始答案：

我真的不知道你想要做什么，所以我只能从经验中说出人们通常想要用它做什么。

如果您想使用微秒来调用setInterval，那么您想要运行的代码所需的时间必须大大少于1毫秒，否则在单线程事件循环中就没有意义了。

你不必担心在几毫秒内阻止浏览器，所以我建议使用这样的东西-而不是使用：

setInterval(function () {
    // YOUR CODE
}, 1/100);

尝试执行以下操作：

setInterval(function () {
    for (var i = 0; i < 1000; i++) {
        // YOUR CODE
    }
}, 10);

实际上，您可以通过避免回调调用开销来提高代码的效率，并且拥有更长的间隔将使代码的运行更具可预测性。

此外，没有人会注意到你的代码每1/100秒以1000次的突发性运行，因为由于操作系统级的进程调度，浏览器本身可能已经以这种突发性运行，而且屏幕也不会更快地刷新。

一项实验

好了，现在来做一些实验。试试下面的代码，看看浏览器的实际最短间隔是多少：

var start = new Date();
var i = 0, interval = setInterval(function(){
    if (++i >= 1000) {
        var end = new Date();
        alert("The average interval was "
              + ((end-start)/1000)) + " milliseconds";
        clearInterval(interval);
    }
}, 0);

请注意，它甚至不会在同一浏览器上保持一致。例如，这取决于您的系统负载。

测试你的浏览器

尝试使用来测试您的浏览器，如果您愿意，可以在评论中发布您的结果。我想知道记录会是什么。

Answer 2

请注意，有些浏览器不接受小于50毫秒的间隔。如果您传递一个较小的间隔，它们将使用他们能够使用的最小间隔。

Answer 3

最短时间因浏览器而异。这里有一个很好的解释：http://www.adequatelygood.com/2010/2/Minimum-Timer-Intervals-in-JavaScript