javascript - iOS 6 js events function not called if has setTimeout in it

Question

I noticed this strange behaviour with the latest iOS (iOS 6). If calling a function for any touch event which has a setTimeout inside, the part inside the setTimeout is never triggered.

This happens only when there is a "system animation" such as scroll and zoom-in/out.

For example:

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

(I used jquery just for testing but the same happens with pure js)

Open that page with safari on any iOS 6 device and zoom in or out. The alert will never be called.

If tested on any iOS 5 device this will work just fine! It seems that during these animations the setTimeout or setInterval are reset by the OS. Is this the intended behaviour or a bug?

Thanks

Answer 1

Note: It looks like UIWebView does not support requestAnimationFrames. Thanks to Guillaume Gendre for pointing it out!

We ran into a similar issue with a web app we're working on.

For us, it was touchmove that caused issues. We implemented a workaround (found here: https://gist.github.com/3755461) that seemed to work pretty well until another issue forced us to abandon it. (I tried adding the workaround to your fiddle and was able to get the timer to fire once or twice, but it required a weird gesture+scroll event that was damn near impossible to consistently reproduce.)

Anyway, one of the new features in iOS 6 for developers are requestAnimationFrames. My workaround is basically a wrapper for timers, allowing the developer to pass a boolean, which will call either the native function or the workaround function.

For example:

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

Here are additional ways to use the workaround:

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

Here are two fiddles with the workaround examples. Try pinch/zooming on the black squares:

http://jsfiddle.net/xKh5m/embedded/result (Uses native setTimeout function) http://jsfiddle.net/ujxE3/embedded/result

We've been using this workaround for a few months in a production environment, and have not run into any major issues.

Here's a public gist of the workaround: https://gist.github.com/4180482

Here's more information about requestAnimationFrames:

MDN documentation

Paul Irish on requestAnimationFrame

Good luck!