Wait the end of a function before to start the next ionic 3

here’s my code
home.html
<form (ngSubmit) = "submitforOTP()"> </form>
home.ts

submitforOTP(){
.
.
this.send()
console.log("code received");
this.codesent = true;
}

send(code_country,tel){
    var numIn = code_country+tel;

    let self = this;

    (<any>window).FirebasePlugin.verifyPhoneNumber(numIn, 60, function(credential) {
      self.verifId = credential.verificationId;
console.log(" verificationId = ", verificationId)
     });

    }, function(error) {

        console.error(error);

    });

}
well, my problem is that

console.log(“code received”); is showing before

console.log(" verificationId = ", verificationId)

i want to wait until FirebasePlugin.verifyPhoneNumber() send SMS code then continue to the next line in the submitforOTP()
any help please ?

The short solution is to put the call to sdubmitOTP in the callback that does the console log verificationid. Because that is the purpose of the callback : do something that should happen after something completed

The longer and more sustainable anwer is to use promises, use typescript, not use any and maybe learn yourself a bit more of angular and angularfire. Too much going on here imho

1 Like

I see three words I never like to see here.

any: it blinds the build system and obscures errors
window: DI systems were built to avoid polluting the global namespace like this
function: you lose execution context

Please get rid of all three of those. Whatever this FirebasePlugin is, seek out an Angular-aware wrapper for it (like something in Ionic Native) that returns a future (such as a Promise or Observable). Return a similar future, transforming as desired, out of send (and give proper types to all method parameters and return values). Hang a then or subscribe off that, and put your “code received” logic in there. It will run once the verification operation has concluded.

1 Like

i have tried this with subscribe and observable but it doesn’t work ! what wrong with it ?
<form (ngSubmit) = "submitforOTP()"> </form>
home.ts

submitforOTP(){
.
.
this.send().subscribe(data => {
      console.log("data", data)
    },error=>{
         console.log(error);
    });
console.log("code received");
this.codesent = true;
}

send(code_country,tel): Observable<any>{
    var numIn = code_country+tel;

    let self = this;

    (<any>window).FirebasePlugin.verifyPhoneNumber(numIn, 60, function(credential) {
      self.verifId = credential.verificationId;
console.log(" verificationId = ", verificationId)
     });

    }, function(error) {

        console.error(error);

    });

}

submitforOTP(){
.
.
this.send()
// console.log("code received");
// this.codesent = true;
}

send(code_country,tel){
    let numIn = code_country+tel;

 //   let self = this;

    (<any>window).FirebasePlugin.verifyPhoneNumber(numIn, 60, (credential)=>{
     this.verifId = credential.verificationId;
console.log(" verificationId = ", verificationId)
   

console.log("code received");
this.codesent = true;

     });

    }, (error) =>{

        console.error(error);

    });

Not the final solution imho, but it may help you to the next stage

Sometimes we just want to complicate ourselves and look for complicated ways :roll_eyes: :grimacing:
i dont know why i couldn’t see that much of ease! i feel so silly now
Thanks BTW.

I don’t mean to be rude, but any, window, and function are all still there. In fact, there is now a new any. send's parameters still have no types.

you absolutely have raison and you have to be “rude” to make things right.
that was just a testing code, i will remove them and correct my code.