解决DOM事件上的JavaScript承诺

Question

我一直在寻找答案，但找不到我的问题（或者至少我不明白如何使其适用于我。）所以我有这个功能：

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

如何在单击按钮时做出承诺解决？预先感谢。

Answer 1

您可以做到。通过将CustomEvent API用于浏览器环境。

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>

Answer 2

一种更好的方法是在DOM中已经包含该按钮，然后对其进行引用。那时，只需将onclick事件处理程序设置为resolve函数即可。 （如果需要，您也可以使用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>