iOS 6 js eventos función no llamada si tiene setTimeout en ella

Question

Me di cuenta de este extraño comportamiento con el último iOS (iOS 6). Si llama a una función para cualquier evento táctil que tenga un setTimeout dentro, la parte dentro de setTimeout nunca se activará.

Esto ocurre solo cuando hay una "animación del sistema" como desplazamiento y acercamiento/alejamiento.

Por ejemplo:

http://jsfiddle.net/p4SdL/2/

(que utiliza jQuery sólo para las pruebas, pero lo mismo ocurre con js puros)

abierto esa página con Safari en cualquier dispositivo iOS 6 y acercar o alejar . La alerta nunca será llamada.

¡Si se prueba en cualquier dispositivo iOS 5, esto funcionará muy bien! Parece que durante estas animaciones el sistema operativo restablece setTimeout o setInterval. ¿Es este el comportamiento previsto o un error?

Gracias

Answer 1

Nota: Parece que UIWebView no soporta requestAnimationFrames. ¡Gracias a Guillaume Gendre por señalarlo!

Nos encontramos con un problema similar con una aplicación web en la que estamos trabajando.

Para nosotros, fue el tacto lo que causó problemas. Implementamos una solución (que se encuentra aquí: https://gist.github.com/3755461) que parecía funcionar bastante bien hasta que otro problema nos obligó a abandonarla. (Intenté agregar la solución al violín y pude hacer que el temporizador se disparara una o dos veces, pero requería un extraño gesto + evento de desplazamiento que era casi imposible de reproducir de manera consistente.)

De todos modos, uno de los las nuevas características en iOS 6 para los desarrolladores son requestAnimationFrames. Mi solución es básicamente un contenedor para temporizadores, que permite al desarrollador pasar un booleano, que llamará a la función nativa o a la función alternativa.

Por ejemplo:

setTimeout(function(){alert("HI")}, 1000); // using native 
setTimeout(function(){alert("HI")}, 1000, true); // using workaround 

Éstos son formas adicionales de utilizar la solución:

setInterval(function(){console.log("Interval")}, 1000, true); 

var timer = setTimeout(function(){ /* ... */ }, 60000, true); 
clearTimeout(timer); 

var interval = setInterval(someFunc, 10000, true); 
if(someCondition) clearInterval(interval); 

Aquí hay dos violines con los ejemplos de solución. Trate pizca/zoom en las casillas negras:

http://jsfiddle.net/xKh5m/embedded/result (Usos nativa setTimeout función) http://jsfiddle.net/ujxE3/embedded/result

Hemos estado utilizando esta solución durante unos meses en un entorno de producción, y no se han topado con problemas importantes .

Aquí hay una esencia pública de la solución: https://gist.github.com/4180482

Aquí hay más información sobre requestAnimationFrames:

MDN documentation

Paul Irish on requestAnimationFrame

Buena suerte!