Javascript global variable not staying changed outside callback function

Question

var IAP_loaded = false; // Global Scope

var IAP_onReady = function(){
     storekit.load(IAP_list, function (products, invalidIds) {
            IAP_loaded = true;
            console.log("1] -- IAP Loaded: "+IAP_loaded); // Outputs true
     });
     console.log("2] -- IAP Loaded: "+IAP_loaded); // Outputs false
     IAP_loaded = true;
     console.log("3] -- IAP Loaded: "+IAP_loaded); // Outputs true
};

console.log("4] -- IAP Loaded: "+IAP_loaded); // Outputs false

For some my global variables aren't staying modified outside the function itself... I created a completely separate function and changed a global variable and it works fine. This just mind baffles me. Any thoughts?

PS. This is a Phonegap 3.0 project and the callback function is from IAP plugin. Found here https://github.com/j3k0/PhoneGap-InAppPurchase-iOS

storekit.load is Asynchronous! Thanks for narrowing it.

2] -- IAP Loaded: false 3] -- IAP Loaded: true 4] -- IAP Loaded: false 1] -- IAP Loaded: true

I get back the response in that order. But it is not Ajax. It's through Objective C, the javascript just handles the responses so it's editable through javascript

If `storekit.load` is an AJAX call, see here http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Sep 27 '13 at 02:41
storekit.load is Asynchronous! Thanks for narrowing it. `2] -- IAP Loaded: false 3] -- IAP Loaded: true 4] -- IAP Loaded: false 1] -- IAP Loaded: true` I get back the response in that order. But it is not Ajax. It's through Objective C, the javascript just handles the responses so it's editable through javascript — Mosayed, Sep 27 '13 at 02:55
Right, but the same concepts apply. Understand the solution, not the language. — Hamish, Sep 27 '13 at 03:13
Where does IAP_onReady get called? It looks like this block of code runs *after* it is called, in which case you would be setting `IAP_loaded` to false again and the output you see would be correct. — Russell Zahniser, Sep 27 '13 at 03:20
Use `"use strict"` and you will have thrown error, this will help you to identify how to fix your problem. — skmasq, Sep 27 '13 at 04:11

score 1 · Answer 1 · answered Oct 11 '13 at 14:57

As suggested IAP (in app purchase) works similar to Ajax. In fact most of phonegap plugins follow the same pattern.

First lets see how plugins works - A call from JS is sent to Obj C file - While Obj C is doing desired calculations other JS code and run simultaneously - After Obj C has completed its calculations the output is sent back to JS via callback

Now lets try to see the code you have provided

var IAP_loaded = false; // Global Scope

var IAP_onReady = function(){
     storekit.load(IAP_list, function (products, invalidIds) {
            IAP_loaded = true;
            console.log("1] -- IAP Loaded: "+IAP_loaded); // Outputs true
     });
     console.log("2] -- IAP Loaded: "+IAP_loaded); // Outputs false
     IAP_loaded = true;
     console.log("3] -- IAP Loaded: "+IAP_loaded); // Outputs true
};

console.log("4] -- IAP Loaded: "+IAP_loaded); // Outputs false

Note - I'm referring to console.log as logs below

Now javascript runs the file is this order

You must be calling 'IAP_onReady' from somewhere, hence

log 4 is printed instantly as it is a non-asyn code with output of 'IAP_loaded' as false. You have initiallized 'IAP_loaded' as false

4] -- IAP Loaded: false

log 2 is printed instantly as it is a non-asyn code with output of var as false, as still 'IAP_loaded' hasn't been modified yet

2] -- IAP Loaded: false

log 3 is printed instantly as it is a non-asyn code, but you have changed the value of 'IAP_loaded' manually to true

3] -- IAP Loaded: true

Now after the execution of 'storekit.load' has completed log 1 is printed, and as here value of 'IAP_loaded' manually to true

1] -- IAP Loaded: true

Please try to provide us the complete code, as how the function is called etc.

score 0 · Answer 2 · answered Oct 11 '13 at 15:46

As with any async code, IAP_loaded is indeed changed to true but not before the code at the bottom executes. To check this, add this test at the bottom after 4:

(function check_IAP(){
    console.log("5] -- IAP Loaded: "+IAP_loaded);
    if (!IAP_loaded) {
        setTimeout(check_IAP,500);
    }
)();

Javascript global variable not staying changed outside callback function

2 Answers2