加快setInterval [英] Speed up setInterval

问题描述

我知道javascript中的setInterval方法至少有1毫秒。我可以加快速度吗？喜欢使用微秒？

I know there's a minimum of 1 millisecond in the setInterval method in javascript. Can I speed this up even more? Like using microseconds?

我需要这个：

我制作一个画布css / js动画。它是一条简单的线条，可以治愈并恢复生产线。我有一个滑块来调整这个动画的速度。所以最低的滑块值会非常快，最高的滑块真的很慢。这是可以理解的吗？谢谢！

i make a canvas css/js animation. it's a simple line, which bends into a cure and back to a line. i have a slider to adjust the speed of this animation. so the lowest slider value would be really fast and the highest really slow. is that understandable? thanks!

推荐答案

更新：

请注意，当写这个答案时，问题是：

Update:

Please note that when this answer was written, the question was:

我知道在$的setInterval方法中至少有1毫秒b $ b javascript。我可以加快速度吗？喜欢使用微秒？

I know there's a minimum of 1 millisecond in the setInterval method in javascript. Can I speed this up even more? Like using microseconds?

后来它被编辑为包含有关画布动画的信息，并且使用该新信息正确答案将使用 window.requestAnimationFrame 方法：

Later it was edited to include the information about canvas animation and with that new information the correct answer would be using the window.requestAnimationFrame method:

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

步骤回调获得 DOMHighResTimeStamp 时间戳每次调用时都会以1微秒的精度作为参数，每次刷新一次就会刷一次（不需要更频繁地绘制任何东西，因为它无论如何都不会显示）。

The step callback gets a DOMHighResTimeStamp timestamp with a precision of 1 microsecond as an argument every time it gets invoked, which is once every time the screen gets refreshed (there's no need to draw anything more frequently because it wouldn't get displayed anyway).

最初的问题是关于加快 setInterval 方法，我的原始答案是关于做一般事情的频率比最小延迟
setInterval 允许（其中根据，嵌套级别大于5的是4ms WHATWG规范， 8.4定时器，或者根据 James Robinson的这篇文章，历史上以前用的方式不同）。

Originally the question was specifically about speeding up the setInterval method, and my original answer was about doing anything in general more frequently than the minimum delay of setInterval allows (which is 4ms for the nesting levels greater than 5 according to the the WHATWG specification, section 8.4 Timers, or 4ms for the nesting levels of 4 or higher according to this post by James Robinson, and historically it used to work differently).

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

I don't really know what are you trying to do so I can only speak from experience of what people usually want to do with it.

如果你想用微秒调用setInterval，那么你想要运行的代码需要花费相当少于一毫秒，否则它在单线程事件循环中没有意义。

If you want to call setInterval using microseconds, then the code you want to run has to take considerably less then a millisecond, or otherwise it wouldn't make sense in a single-threaded event loop.

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

You don't have to worry about blocking the browser for a few milcroseconds so I would suggest using something like this – instead of having:

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

尝试：

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

实际上，通过避免回调调用开销和更长的间隔将使您的代码更高效代码运行得更加可预测。

You will actually make your code more efficient by avoiding the callback calling overhead and having longer intervals will make your code run more predictably.

也没有人会注意到你的代码每1/100秒突发运行1000次，因为浏览器有可能由于操作系统级别的进程安排，本身已经在这样的突发中运行，并且屏幕也不会更快地刷新。

Also no one is going to notice that your code runs in bursts 1000 times every 1/100 of a second, because there's a chance that the browser itself already runs in such bursts thanks to the OS-level process scheduling, and also the screen won't get refreshed faster anyway.

好的，现在进行一些实验。尝试使用此代码查看浏览器实际上最短的间隔：

Ok, now some experiment. Try this code to see what is actually the shortest interval for your browser:

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);

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

Note that it won't even be consistent on the same browser. It depends on your system load for example.

尝试 这个有趣的 来测试您的浏览器并在评论中发布结果（如果您愿意）。我想知道会有什么记录。

Try THIS FIDDLE to test your browser and post your result in the comments if you like. I wonder what will be the record.

这篇关于加快setInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！