Accessing a variable from within nested functions in Javascript

Question

I have the following function:

downloadProductImage: function(remoteImage, localImageName){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile(localImageName, {create: true, exclusive: false}, function(fileEntry) {
            var localPath = fileEntry.fullPath;
            var ft = new FileTransfer();
            ft.download(remoteImage,
                localPath, function(entry) {
                    //RETURN THIS imageURL = entry.fullPath;

                }, fail);
        }, fail);
    }, fail);       
}   

The function downloadProductImage() is within global var app = {}, so accessed by app.downloadProductImage().

This function runs within a loop, and I wish to return the imageURL but can't seem to get it. I declare global var = imageURL outside the var app = {} but whenever I try to get imageURL in another function, the first loop returns undefined and the rest are correct.

I am not sure why the first loop through returns undefined.. the var imageURL is declared globally at the top of the page..

If I alert(imageURL) within the code above under //RETURN THIS imageURL = entry.fullPath;, it alerts correctly, just not when I try to access it outside the function

Answer 1

Given that @dfsq mentioned this is an async call, I believe you will find that imageURL is undefined when you access it at the toplevel because the callback simply hasn't been called yet.

Easiest way to confirm this is to insert two console.log() statements in the callback, just before you set imageURL, and just after; and another two console.log() statements around the point in the toplevel code where you access imageURL.

If the access does occur before the assignment, then this will explain why you are seeing 'undefined'. To solve your problem you will need to defer whatever you are doing at the toplevel until the callback has finished. jQuery promises are one way to do this, but there are other options in other libraries as well. Look for 'futures', 'promises', 'deferred execution' as keywords in whatever library you are using. If you are using any sort of event framework, you could also use that: trigger an event in the callback, and listen for the event at the toplevel (make sure you listen before you trigger, or you will have the opposite problem).

If you are using jQuery, then the following might give you a headstart:

var imageURLPromise = jQuery.Deferred();

downloadProductImage: function(remoteImage, localImageName){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile(localImageName, {create: true, exclusive: false}, function(fileEntry) {
            var localPath = fileEntry.fullPath;
            var ft = new FileTransfer();
            ft.download(remoteImage,
                localPath, function(entry) {
                    // Note: The assignment is mediated by the DeferredObject that handles the timing issues for us.
                    imageURLPromise.resolve(entry.fullPath);
                }, fail);
        }, fail);
    }, fail);       
}   

imageURLPromise.done(function(imageURL) {
    // Use imageURL here at toplevel.
});