jQuery Forum

First, though, my initial issue turned out to be a stupid typo in my site's JS file, which was causing that to not load (silently erroring out in PhoneGap on iOS, one of the "features" of iOS), and giving the appearance of a timing issue.  However, that was a lucky coincidence (other than causing me to lose nearly a day finding it), because it unearthed this timing thing.

My app uses jQMobile inside of PhoneGap, and deployed on iOS.  I also use UrbanAirship to deliver notifications, and that means I have the PhoneNotification.js (from UA) and UAPhoneGapWrapper.js (from community - google if curious) to handle that piece. As mentioned before, my index.html page is used to check prior authorization credentials, and either forward to the main app (if valid) or to login (in not). Sequence of JS files in my index.html page are: PhoneGap, jQuery, my init for mobileinit vars, jQMobile, PushNotification, UAPhoneGapWrapper, and my local file. I think this sequence is mostly necessary, although you could move PhoneGap later as long as it's before the last three - it takes a while to load, though, so I put it first, and I also set an event listener for it in my init (see below).

This created a rather complex timing scenario.  I needed the device token from Apple for my authorization process, and to track on the server for sending notifications, and that came from the UA JS files.  The UA files needed PhoneGap to be initialized in order to work.  My index.html couldn't do its thing until jQM, PhoneGap, and the UA pieces all finished working, however jQM would load the page and fire off all of the jQM events regardless of where those others were, and typically finished first.

What solved it was ytzhakov's tip, with some expansion for my complicated setup.  I have three variables, each to track the readiness of the three components (jQM, PG, and UA).  The jQM one is set to true when the index.html's pageinit event is triggered, which I have sitting in my page's JS file (the last one).  The PG is set in my page's init file based off of deviceready event. The UA one is set inside of the UAPhoneGapWrapper's successCallback function (I realize that this one is not necessarily run in all situations, however the way my app works it works out).

The final function code (sitting in my final JS file) is triggered by the index.html file's pageinit function (same that sets the jQM ready to true), and looks like:

2. function beginAuthProcess() {
3. if (indexPageReady && onPhoneGapReady) {
4. AirshipPush.init(); // this points to UAPhoneGapWrapper functions
5. if (uaReady) {
6.                         // all of my authentication functions, and forwarding as necessary
7. } else {
8. setTimeout(beginAuthProcess(), 1000);
9. }
10. } else {
11. setTimeout(beginAuthProcess, 1000);
12. }
13. }

I could have removed the indexPageReady piece, since that's a given with how I call the function, but I left it in for clarity, and in case I need to trigger it a different way in the future.