解決 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

像這樣的東西？

 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>

Answer 3

更好的方法是在 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>