javascript - setTimeout runs faster on iPad vs PC

Question

I'm creating an HTML5 web app meant for the iPad, but which can also be run in a PC browser. I'm using the javascript function setTimeout to synchronize some screen transitions with an audio file playing in the background.

Specifically, the code I'm using is:

setTimeout(showStartScreen, 30000);
setTimeout(showInstructionScreen, 60000);

On a PC the timing is perfect and the transition matches up with the audio fine. On an iPad 2, the transition is about a half second faster than on the PC. ON an iPad 3, the transition is even faster.

Is there a more reliable way to time something across different platforms?

Answer 1

Rather than creating a timeout and hoping that the timer keeps in sync, you should poll the audio's currentTime and act on it.

setInterval(function() {
    var now = audio.currentTime;
    // do something based on the audio's position.
},25);

This assumes you are using HTML5 <audio> elements.