So Josh and I were observing some really strange behaviour in the Keyman for iOS beta. When typing rapidly on the touch keyboard, we would sometimes get the wrong character emitted. We could not see anything immediately wrong in the code. So Josh added some logging. Then things got really weird: we would get the start of a touch event, then before the touch event handler finished, we’d get logging that indicated another touch event was received.
Whoa. In JavaScript, that shouldn’t be possible, right?
Each message is processed completely before any other message is processed. This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be pre-empted and will run entirely before any other code runs (and can modify data the function manipulates). This differs from C, for instance, where if a function runs in a thread, it can be stopped at any point to run some other code in another thread.
— https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
After we dug in further, we found that it was indeed possible for a new touch event (and perhaps others) to be received when location.hash was set from the JavaScript code, in Safari for iOS.
Here’s a fairly minimal repro. Load this up on your iPhone, and start rapidly touching the Whack div. You’ll probably need to use two fingers repeatedly to trigger the event (I can usually get it to happen with about 50-100 rapid touches). When it happens, you’ll get a log message with a call stack showing how the whackIt() function has apparently called itself!
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>location.hash re-entrancy</title>
<style>
#whack { font-size: 64pt }
#log, #stack { font-family: courier }
</style>
</head>
<body>
<div id=whack>Whack</div>
<div id=log></div>
<div id=stack></div>
<script>
var tick = 0, inWhack = false;
function whackIt(e) {
e.preventDefault();
tick++;
if(inWhack) {
stack.innerHTML = 'Re-entrant event: '+(new Error()).stack;
return false;
}
var localTick = tick;
log.innerHTML = tick;
inWhack = true;
// Setting location.hash seemingly can cause the
// event queue to be polled, resulting in a
// re-entrant touch event
location.hash = '#'+localTick;
inWhack = false;
if(localTick != tick) {
// alert('We had a re-entrant event');
}
return false;
}
whack.addEventListener('touchstart', whackIt, false);
whack.addEventListener('touchend', whackIt, false);
</script>
</body>
</html>We’ll be reporting this to Apple… Just a heads up.
https://stackoverflow.com/a/2734311/1836776 provides some additional examples. window.alert() is fairly well known but some of the others show how other events can sneak in, especially on older browsers. Nasty…