自定义JS提示功能[重复]答案

【问题标题】：Custom JS prompt function [duplicate]自定义JS提示功能[重复]
【发布时间】：2021-06-25 17:05:14
【问题描述】：

思路：调用异步customPrompt()wait，点击按钮返回true或false。

目前我可以按应有的方式显示提示，但我被困在事件侦听器上，因为该函数只返回未解决的承诺

async function customPrompt() {

  prompt.classList.add('show);

  prompt.querySelector('.btnTrue').addEventListener('click', () => {
    return true;
  })

  prompt.querySelector('.btnFalse').addEventListener('click', () => {
    return false;
  })
}

如何在单击其中一个按钮后立即解决承诺？

PS：我对 async/await 很陌生，但在网上找不到任何关于此类的文章

任何帮助表示赞赏;)

【问题讨论】：

Promise 不应该用于可以解决多次的事情，而应该使用事件或回调。
我假设真正的代码也会在单击按钮时删除对话框。
是的，这只是一个简化的示例，但@ponury-kostek 的解决方案有效并帮助解决了所有问题

标签： javascript asynchronous ecmascript-6 async-await promise

【解决方案1】：

在您的customPrompt 函数中创建Promise，并在单击按钮时创建resolve

function customPrompt() {
  return new Promise((resolve) => {
      prompt.classList.add('show');

        prompt.querySelector('.btnTrue').addEventListener('click', () => {
          prompt.classList.remove('show');
          resolve(true);
        })

        prompt.querySelector('.btnFalse').addEventListener('click', () => {
          prompt.classList.remove('show');
          resolve(false);
        })
      })
  }
}

【讨论】：

谢谢，这行得通?
@ddl 小心，因为似乎相同的 HTML 元素被重复用于连续提示，事件侦听器将一次又一次地附加，不仅泄漏内存，而且还试图解析或拒绝已经解析/拒绝了之前的承诺。我建议将事件侦听器函数存储在变量中，并在隐藏提示时删除侦听器。（...或者只是普遍删除所有点击侦听器）
您应该将{once: true} 作为第三个参数传递给addEventListener。 @ddl 我在linked duplicate 上添加了一个答案。
@谢谢：不，这还不够，因为添加了两个侦听器，但每次运行代码时只会触发一个，所以另一个会保留。