JS - 返回空承诺并稍后解决

Question

在 JS 中，我想：

1. 定义一个定义承诺的函数。
2. 这个函数然后有一个事件来解决这个承诺。
3. 该函数返回未解决的承诺。
4. 当 promise 被解析时，调用者将收到解析的值。

类似这样的：

function my_func() {
    // This creates an empty promise.
    const p = Promise;

    // When a user clicks a button in UI then we resolve the promise.
    // This would be in an event!
    // p.resolve('user clicked OK');

    // Returns empty promise.
    return p;
}

function main() {
    // Here when the promise is resolved then we get the value.
    my_func().then(function(v) {
        console.log(v);
    });
}

Answer 1

这似乎是一个奇怪的设计，但作为 Bergi cmets，没有什么能阻止你这样做 -

function my_func () {
  return new Promise(r =>
    document.forms.myapp.mybutton.onclick = r
  )
}

function main () {
  my_func().then(event => console.log(event.target))
}

main()

<form id="myapp">
  <button type="button" name="mybutton">Click me</button>
</form>

Promise 最多可以解决一次次，因此在第一次单击后自动删除事件侦听器可能是有意义的。我们可以将 my_func 重命名为 onclick 并给它一个参数以使其可重用 -

function onclick(elem) {
  return new Promise(r =>
    elem.addEventListener("click", r, {once: true})
  )
}

function main () {
  onclick(document.forms.myapp.mybutton)
    .then(event => console.log(event.target))
    
  onclick(document.forms.myapp.otherbutton)
    .then(event => console.log(event.target))
}

main()

<form id="myapp">
  <button type="button" name="mybutton">A</button>
  <button type="button" name="otherbutton">B</button>
</form>

现在onclick 可以以更有趣的方式使用。例如，我们可以制作一个需要 两次 次点击才能触发效果的按钮 -

function onclick(elem) {
  return new Promise(r =>
    elem.addEventListener("click", r, {once: true})
  )
}

function main () {
  onclick(document.forms.myapp.mybutton)
    .then(event => console.log(event.target))
    
  onclick(document.forms.myapp.otherbutton)
    .then(_ =>
      onclick(document.forms.myapp.otherbutton)
        .then(event => console.log(event.target))
    )
}

main()

<form id="myapp">
  <button type="button" name="mybutton">click once</button>
  <button type="button" name="otherbutton">click twice</button>
</form>

Answer 2

在这里找到答案：Creating a (ES6) promise without starting to resolve it

deferreds 可以随意传递，然后可以在其他地方解决或拒绝承诺。
还没有在代码中测试过，所以不知道这种方法是否有任何问题。

function my_func() {
  const deferreds = [];
  const p = new Promise(function (resolve, reject) {
    deferreds.push({ resolve: resolve, reject: reject });
  });
  const btn = document.querySelector('.btn');

  btn.addEventListener('click', event => {
    deferreds[0].resolve('User clicked button!');
  }, {once: true});

  return p;
}

function main() {
  my_func().then(function (v) {
    console.log(v);
  });
}

main();

<button class="btn">
    Hi! Click me
</button>