Javascript - How next line wait to be executed after asyncronus function is done?

Question

I'm using FileTransfer.download function from a Phonegap plugin to download files in my app mobile.

This function is assyncronus, so the next lines are executed without dependence of conclusion of this function.

My app app capture the user photo from server during its login process, so the user can't be moved to home screen after this action is concluded. But with my actual code, it doesn't happen, because I don't know how to do it.

Below you can check my code:

var usuarios = json.usuarios;

var fileTransfer = new FileTransfer();

for(var key in usuarios) {
    if(usuarios.hasOwnProperty(key)){
        if(usuarios[key].tipo == "titular"){

            var titular = {
                "id"                : usuarios[key].id,
                "email"             : $("#login-email").val(),
                "foto"              : "images/perfil.jpg"
            };

            localStorage.setItem('appnowa-titular', JSON.stringify(titular));

            if(usuarios[key].foto == "1"){

                window.fileDownloadName = "appnowa-perfil-" + usuarios[key].id + ".jpg";

                console.log('downloadFile');

                window.requestFileSystem(
                    LocalFileSystem.PERSISTENT,
                    0,
                    function(fileSystem){
                        console.log('onRequestFileSystemSuccess');
                        fileSystem.root.getFile(
                            'dummy.html',
                            {create: true, exclusive: false},
                            function(fileEntry){
                                console.log('onGetFileSuccess!');
                                var path = fileEntry.toURL().replace('dummy.html', '');
                                var fileTransfer = new FileTransfer();
                                fileEntry.remove();

                                fileTransfer.download(
                                    'https://www.myserver.com/imagens/clientes/' + window.fileDownloadName,
                                    path + window.fileDownloadName,
                                    function(file) {
                                        console.log('download complete: ' + file.toURL());me;
                                        titular.foto = file.toURL();
                                    },
                                    function(error) {
                                        console.log('download error source ' + error.source);
                                        console.log('download error target ' + error.target);
                                        console.log('upload error code: ' + error.code);
                                        titular.foto = "images/perfil.jpg";
                                    }
                                );  
                            },
                            fail
                        );
                    },
                    fail
                );

                console.log("1 " + titular.foto);
            }
        }
    }
}

localStorage.setItem('appnowa-dependentes', JSON.stringify(dependentes));

appNowa.pushPage('mainPage.html'); //go to next page

Answer 1

I think you can achieve it by two ways,

Chained callbacks or with a state test in all the callbacks;

I will write pseudo code that i think could be a working solution (not tested, no guarantee)

afterCharge=function(){
  doYourStuffHere;
}

//method 1 in your callback
var complete=0
len = usuarios.lenght;
for(var key in usuarios){
  //do yourstuff
  fileTransfer.download(
      file,
      path,
      function(file){
        //do your stuff
        complete++;
        if(len===complete){
          afterCharge();
        }
      },
      function(error){
        //do your stuff
        complete++;
        if(len===complete){
          afterCharge();
        }
      }
  );
}