Javascript variables are corrupted in iPad orientation change event handler

Question

I am developing an Html and Javascript catalogue pageslider for iPad which shows one page in portrait and two pages in landscape.

Two variables for maintaining the state of the catalogue are manipulated on each orientation change in an event handler.

The variables are corrupted when I toss and turn the iPad quickly. They are fine when I operate it as one would normally do (rather slowly, that is).

I've tried using a locked variable to prevent the handler from being run if it has not completed yet, i.e. in case mobile Safari breaks Javascript execution on orientation change:

function updateOrientation() {
    if (locked) return;
    locked = true;
    ...

However, this never seems to be the case; the handler always finishes before it is called again.

Hence, how do the variables get corrupted?

Any ideas?

Answer 1

I've found the answer.

Normally, I would expect the orientation change event to imply a change in orientation, i.e. window.orientation should change value (portrait -> landscape or landscape -> portrait).

However, quick tosses and turns cause the event handler to be called two consecutive times with the same value being read from window.orientation. This is unexpected and corrupts the state variables.

I solved the problem by keeping the last known orientation and immediately return if the value hasn't changed since last time.

function updateOrientation() {
if (lastOrientation == isPortrait()) return; // prevent erroneous orientation changes
lastOrientation = isPortrait();