Actualmente estoy tratando de obtener un efecto de sonido repetitivo, que se vuelve más lento con el tiempo con setTimeout() sincronizado con una animación. Tan pronto como lo sincronice, funcionará y permanecerá sincronizado durante el tiempo que esté trabajando en el programa. Pero ahora, cuando estuve fuera durante aproximadamente 1 1/2 horas y volví a ejecutar el programa exactamente como lo dejé, el sonido ya no está sincronizado con la animación. A mi me paso lo mismo con el mismo programa ayer cuando estuve fuera un tiempo y toda la noche.
Así que estaba pensando que setTimeout() de alguna manera funciona con la hora actual y funcionará de manera diferente en diferentes momentos. Puede alguien confirmar esto?
Aquí está mi código para referencia. La función de tiempo de espera:
const timeoutRollSound = (time = 0, index = 0) => { setTimeout(() => { const audioClick = new Audio( "foo/bar.wav" ); audioClick.play(); index++; timeoutRollSound(0.05 * Math.pow(index, 2) + 3 * index - 50, index) }, time); };La animación:
$(".itemToAnimate").animate( { right: endpoint }, { duration: 10000, easing: "easeOutQuint", } );Tuve este problema en Java hace años. Esto es lo que está pasando.
Cuando establece un tiempo de espera (como lo está haciendo), en realidad está diciendo "No quiero que esta función se ejecute antes de X milisegundos". Entonces, la función de tiempo de espera puede estar lista para ejecutarse, pero JavaScript o el navegador pueden estar haciendo otra cosa.
setInterval podría funcionar mejor. Pero la otra cosa que puede hacer es incluir la diferencia entre cuándo el código era elegible para ejecutarse y el momento en que realmente se ejecutó, como:
setTimeout(() => { const audioClick = new Audio( "foo/bar.wav" ); audioClick.play(); index++; timeoutRollSound(0.05 * Math.pow(index, 2) + 3 * index - 50, index) timeoutRollSound.last = Date.now(); }, time - ((Date.now - timeoutRollSound.last) );Esto me recuerda un problema que estaba teniendo con otra biblioteca JS y podría estar relacionado. Si pone la pestaña en el navegador en segundo plano, la ejecución se suspenderá. Por lo que obtengo de su código, confía en el hecho de que la recursión setTimeout se ejecutará constantemente, lo que podría ser la fuente de sus problemas.
Este podría ser el problema que está teniendo, eche un vistazo: Chrome: ¿tiempos de espera/intervalos suspendidos en las pestañas de fondo?