如何在jquery点击功能中等待确认答案

【问题标题】：How to await inside jquery click function for confirmation如何在jquery点击功能中等待确认
【发布时间】：2020-11-03 22:44:00
【问题描述】：

您好，我有一个要求，我需要等待确认完成。

注意：我不能在点击（大块）内触摸我的前辈的下面代码或用.then(function(){..});包装它们

这是我尝试过但给出错误的方法：

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
 });

问题：我想等到确认完成而不用.then(function(){..});包装老年人的整个代码

这是我尝试过的：

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>

【问题讨论】：

await 只能在 async 函数内使用 ---> async function() { ... }
showConfirmationAndWait 应该返回一个Promise。目前它返回undefined。你到底不能在这段代码中改变什么？如果您无法更改该功能，那么它看起来不会是可等待的。
@David 它只返回Promise
@Learner 确实是在兑现承诺。但是承诺立即被解决为未定义。您需要重写 showConfirmationAndWait 以实际等待 confirm 并返回有用的内容。

标签： javascript jquery promise

【解决方案1】：

您需要重写showConfirmationAndWait 才能真正等待确认并返回结果。

还将您的整个处理程序标记为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>

【讨论】：