How to await inside jquery click function for confirmation

Question

Hi i have a requirement where i need to await for confirmation to finish.

Note: i cannot touch below code of my seniors within click(big chunk) or wrap them with .then(function(){..});

Here is what i tried but giving error:

async function showConfirmationAndWait(){
    $.alertable.confirm('You sure?').then(function() {
      return new Promise(function(res,rej){
           res({confirmed:true});
      });
    }, function() {
       return new Promise(function(res,rej){
           res({confirmed:false});
      });  
    });
}  

$('#await').on('click',function(){
    var promiseObj =  await showConfirmationAndWait(); //throwing error
    
    //...... big code with its own function call that i don't want to touch
 });

Question: i want to wait till confirmation finishes without wrapping whole code of seniors with .then(function(){..});

Here is what i have tried:

async function showConfirmationAndWait(){
    $.alertable.confirm('You sure?').then(function() {
      return new Promise(function(res,rej){
           res({confirmed:true});
      });
    }, function() {
       return new Promise(function(res,rej){
           res({confirmed:false});
      });  
    });
}  

$(function(){
    $('#await').on('click',function(){
        var promiseObj =  await showConfirmationAndWait(); //commented due to error
         console.log('after await promiseObj',promiseObj);
      
       //...... big code with its own function call that i don't want to touch
    });
}); 

<link href="https://cdn.rawgit.com/claviska/jquery-alertable/master/jquery.alertable.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://rawgit.com/claviska/jquery-alertable/master/jquery.alertable.min.js"></script>


<button id="await">Show confirmation wait and proceed next line</button>

Answer 1

You need to rewrite showConfirmationAndWait to actually await for the confirmation and to return the result.

Also mark your entire handler as async.

async function showConfirmationAndWait() {
  try {
    await $.alertable.confirm('You sure?');
    return true
  } catch {
    return false
  }
}

$(function() {
  $('#await').on('click', async function() {
    var promiseObj = await showConfirmationAndWait();
    console.log('after await promiseObj', promiseObj);

    //...... big code with its own function call that i don't want to touch
    console.log('Some scary logic goes here. It should be printed after confirmation.');

  });
});

<link href="https://cdn.rawgit.com/claviska/jquery-alertable/master/jquery.alertable.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/claviska/jquery-alertable/master/jquery.alertable.min.js"></script>


<button id="await">Show confirmation wait and proceed next line</button>