Событие onClick возвращает обещание, необходимо вызвать функцию после разрешения обещания в onclick

Question

В приведенном ниже примере я хочу, чтобы значение 'overwritten' отображалось в div 'one' после ожидания завершения события click. Я действительно что-то упустил после нажатия кнопки «щелкни здесь!».

jsFiddle ссылка: https://jsfiddle.net/RajKumari_1/qcaz9ygn/

var asyncCall = function() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.getElementById('one').innerText = "1";
      resolve('true')
    }, 500);
  })
}

var afterAsync = () => {
  document.getElementById('callAsync').click();
  document.getElementById('one').innerText = "overwritten";
}

$("#callAsync").click(asyncCall);
$("#afterAsync").click(afterAsync);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="callAsync">callAsyn</button>
<button id="afterAsync">click here !</button>

<div id="one"> </div>

Answer 1

Используйте переменную для хранения вашего обещания:

var asyncCall = function() {
  promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      document.getElementById('one').innerText = "1";
      console.log('1');
      resolve('true')
    }, 500);
  })
}
var afterAsync = () => {
  document.getElementById('callAsync').click();
  if(promise) {
    promise.then(()=>{
      document.getElementById('one').innerText = "overwritten";
      console.log('overwritten');
    })
  }
  
}
$("#callAsync").click(asyncCall);
$("#afterAsync").click(afterAsync);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="callAsync">
callAsyn
</button>
<button id="afterAsync">
click here ! 
</button>
<div id="one">

</div>