How to do something 60 times in a second with javascript

Question

I believe that it involves setinterval

I've got the second using this

var s=today.getSeconds();

Then using setinterval

I've got this

setInterval(function(){ alert("Hello"); }, 3000);

The question... I don't think I can divide a second by 60 and use that "asynchronously" I think I'm using that word right, a seconds unit divided 60 times, every 1/60th increment something happens

I'm wondering if I should / have to use milliseconds as those units exist, I'd probably just use a ratio or something to make the equivalent of a second / sixty

Answer 1

As suggested in a comment, since you ask for 60 times per second, it might mean you want to update an animation i.e. change the color, position, shape etc. of some DOM elements on the screen.

For this it's recommended to use requestAnimationFrame instead of setInterval.

So instead of

setInterval(function () {
   doSomething();
}, 16)

use

function myFunction () {
   doSomething();
   requestAnimationFrame(myFunction);
}
requestAnimationFrame(myFunction);

This allows browser to perform certain optimizations.

From MDN:

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

The callback rate may be reduced to a lower rate when running in background tabs.

The name requestAnimationFrame might be a bit confusing, but you should read it as "please run my callback whenever the browser is ready to do a repaint of the screen", i.e. you let the browser decide the exact timing instead of imposing it yourself.