Question

I’m trying to detect orientation changes on mobile devices and trigger a function once an orientation has been completed, but the code inside the function is continuously firing in Android and I’m not sure why. Here’s my code:

var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, 
   function() { alert ('orientation changed'); }, 
   false
);

Does anyone know how to write this so that it only triggers once, after orientation change has been completed?

Answer 1

I used a work-around for this in my app. I added an event listener for orientationchange and then set a timeout so the orientationchange could occur and I could get a new width value that actually reflected the width after the orientation change.

var device_width = 0;
$(document).ready(function () {
    var oc_timer;
    $(window).bind('orientationchange', function () {
        clearTimeout(oc_timer);
        oc_timer = setTimeout(function () {
            device_width = $(window).width();
        }, 500);
    });
});

I am not positive this will solve your continuously firing function problem but this is a solution I found to work.