Решить обещание JavaScript на DOM-событии

Я искал ответ, но не смог найти ни одного для своей проблемы (или, по крайней мере, я не понимал, как заставить его работать для меня). Итак, у меня есть эта функция:

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    document.getElementById("element").innerHTML = 
      "<button onclick="">Next</button>";
  });
};

Как я могу разрешить обещание при нажатии кнопки? Заранее спасибо.

Всего 3 ответа


Что-то вроде этого?

function Test() {}

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    const btn = document.createElement("button")
    btn.innerHTML = 'Next'
    btn.addEventListener('click', resolve);
    document.getElementById("element").appendChild(btn)
  });
};

(new Test()).testing()
<div id="element"></div>


Ты можешь это сделать. Используя API CustomEvent для среды браузера.

function myPromiseReturningFunction() {
  return new Promise(resolve => {
    window.addEventListener("myCustomEvent", (event) => {
       resolve(event.detail);
    }) 
  })
}

myPromiseReturningFunction().then(result => {
   alert(result)
})

document.getElementById("element").addEventListener("click", () => {
   window.dispatchEvent(new CustomEvent("myCustomEvent", {detail : "It works!"}))
})
<p id="element"> Next </p>

Лучшим способом было бы уже иметь кнопку в DOM, а затем ссылаться на нее. На этом этапе достаточно просто установить обработчик события onclick для функции разрешения. (Вы также можете использовать addEventListener если хотите)

var elBtn = document.getElementById('resolver');
function Test(){ }

Test.prototype.testing = function(){
  return new Promise(function (resolve, reject){
    elBtn.onclick = resolve;
  });
};

var t = new Test();
t.testing().then(x=> {
  console.log('resolved!');
});
<button id='resolver'>Click me!</button>


Есть идеи?

10000