Funzione iOS 6 js non chiamata se è impostata su SetTimeout

Question

Ho notato questo strano comportamento con l'ultimo iOS (iOS 6). Se si chiama una funzione per qualsiasi evento di tocco che contiene un setTimeout, la parte all'interno di setTimeout non viene mai attivata.

Ciò si verifica solo quando è presente una "animazione di sistema" come scorrimento e zoom avanti/indietro.

Ad esempio:

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

(ho usato jquery solo per i test, ma lo stesso accade con js puri)

Aprire la pagina con Safari su qualsiasi dispositivo iOS 6 e lo zoom in o out . L'avviso non verrà mai chiamato.

Se testato su qualsiasi dispositivo iOS 5, funzionerà perfettamente! Sembra che durante queste animazioni il setTimeout o setInterval vengano resettati dal sistema operativo. È questo il comportamento previsto o un bug?

Grazie

Answer 1

Nota: Sembra UIWebView non supporta requestAnimationFrames. Grazie a Guillaume Gendre per averlo indicato!

Abbiamo riscontrato un problema simile con un'app Web su cui stiamo lavorando.

Per noi, è stato il touchmove a causare problemi. Abbiamo implementato una soluzione alternativa (trovata qui: https://gist.github.com/3755461) che sembrava funzionare abbastanza bene fino a quando un altro problema ci ha costretto ad abbandonarlo. (Ho provato ad aggiungere la soluzione al tuo violino ed è stato in grado di far scattare il timer una o due volte, ma ha richiesto un gesto strano + evento di scroll che era praticamente impossibile riprodurlo in modo coerente.)

In ogni caso, uno dei le nuove funzionalità di iOS 6 per gli sviluppatori sono requestAnimationFrames. La mia soluzione è fondamentalmente un wrapper per i timer, che consente allo sviluppatore di passare un valore booleano, che chiamerà la funzione nativa o la soluzione alternativa.

Ad esempio:

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

Qui ci sono altri modi per utilizzare la soluzione:

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); 

Qui ci sono due violini con gli esempi di soluzione. Prova pinch/zoom sulle caselle nere:

http://jsfiddle.net/xKh5m/embedded/result (Utilizza nativa setTimeout funzione) http://jsfiddle.net/ujxE3/embedded/result

Abbiamo utilizzato questa soluzione per un paio di mesi in un ambiente di produzione, e non hanno eseguito in tutte le questioni importanti .

Ecco un succo pubblico della soluzione alternativa: https://gist.github.com/4180482

Ecco ulteriori informazioni su requestAnimationFrames:

MDN documentation

Paul Irish on requestAnimationFrame

Buona fortuna!