Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
8
rated 0 times [  13] [ 5]  / answers: 1 / hits: 32737  / 13 Years ago, mon, march 14, 2011, 12:00:00

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!


More From » javascript

 Answers
4

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.


[#93294] Friday, March 11, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mustafaericho

Total Points: 322
Total Questions: 103
Total Answers: 110

Location: Montenegro
Member since Thu, Jun 16, 2022
2 Years ago
mustafaericho questions
Mon, May 31, 21, 00:00, 3 Years ago
Sun, May 23, 21, 00:00, 3 Years ago
Sat, Feb 13, 21, 00:00, 3 Years ago
Sat, Jan 2, 21, 00:00, 3 Years ago
Thu, Nov 12, 20, 00:00, 4 Years ago
;