javascript - 有没有办法让 jQuery 的 .on() 函数更好地处理 promises？

Question

请耐心等待——我意识到我在下面做的事情很愚蠢，我只是在网上看不到解决方案来让自己变得愚蠢 :)

我有以下功能，我想返回一个 promise :

function getInput() {
  var form = $("form.prompt"); // some form in the DOM, this is working fine
  return Promise.resolve(form.show().focus().submit(function(event) {
    var input = $(this).find("input");
    var inputVal = input.val();
    alert("form submitted! input val is " + inputVal);
    event.preventDefault();
    resolve(inputVal);
  }));
}

我调用该函数并尝试等待 promise 解决:

getInput().then(function(response) {
  alert("input resolved; response is " + response);
});

我希望看到以下行为:在我提交表单之前没有警报，之后我会看到“表单已提交!”然后“输入已解决”。

相反，我立即看到“输入已解决”。 (显然，在那之后，一旦我提交了表单，我就会看到“表单已提交!”。)

我意识到我完全没有正确处理 .submit() 函数；我把它当做 thennable 来对待，并且会被 Promise.resolve() 转换成一个合适的 promise。显然，这不会发生。我收集到 .submit() 具有一些其他值或属性，并且 Promise.resolve() 立即结束其 promise 评估链，这就是 then() 立即执行的原因。

此外，我意识到我正在处理 .submit() 就好像它是我正在等待的单个事件，而它是一个回调函数，每次 表单提交时都会运行.

我的问题是，做我想做的事情的正确方法是什么？即，推迟执行某些代码(此处由“输入已解决”警报表示)直到特定表单被提交一次？就像我需要一个函数，它会在短时间内循环，直到它看到 .submit() 回调设置了一个标志...

Answer 1

我想你想要这个:

function getInput() {
  var form = $("form.prompt"); // some form in the DOM, this is working fine
  var deferred = $.Deferred();
  form.show().focus().one("submit", function(event) {
    var input = $(this).find("input");
    var inputVal = input.val();
    alert("form submitted! input val is " + inputVal);
    event.preventDefault();
    deferred.resolve(inputVal);
  });
  return deferred.promise();
}