Accuracy of setTimeout in React Native

Question

I'm building a metronome in React Native. After playing a click, I set a setTimeout for the next click. The timing however, is awful.

I did the following quick test:

let time = (new Date()).getTime() + 50;

setTimeout(() => {
  console.log(time - (new Date()).getTime());
}, 50)

Ideally, I should get 0 in the console. While running this outside React Native in Chrome Dev Tools, I get -1, sometimes -2 (ms). This is an acceptable result.

Running this inside React Native using the Simulator on macOS I get values between 0 and -100. This clearly is not acceptable.

Does someone know if this is due to the inaccuracy of setTimeout or the inaccuracy of (new Date()).getTime()? Can I fix this?

Answer 1

The delay that you configure for setTimeout and setInterval should never be thought of as an exact delay time. They represent the "minimum" amount of time that you'll wait before the function is executed. This is because the user-agent places the callback into the event queue when the time has elapsed, but if the user-agent is still working on some other task, the callback will sit there.

You should also know that there is a built-in absolute minimum time that you are never going to be able to go under of roughly 9-14ms. This is due to the internals of the user-agent.

Answer 2

I've investigated almost any React Native solution for playing audio and various approaches of using javascript setTimeout()/setInterval(), but none of them were satisfactory in terms of time stability and accuracy.

Probably the only way to go at the moment is to glue some native module like this: https://developer.apple.com/library/content/samplecode/HelloMetronome/Introduction/Intro.html to js side, as described in RN Docs: https://facebook.github.io/react-native/docs/native-modules-ios.html, which gives a pretty decent result, but unfortunately, it's iOS only, of course.