Speed up setInterval

Question

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?

for what i need this:

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!

Answer 1

Update:

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

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?

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

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

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

Original answer:

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.

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

Try doing:

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.

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.

An experiment

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.

Test your browser

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

Answer 2

Note that some browsers won't accept intervals smaller even than 50 milliseconds. If You pass a smaller interval, they will use the smallest they are able to use.