从函数包装事件返回数据答案

【问题标题】：Returning data from a function wrapped event从函数包装事件返回数据
【发布时间】：2015-02-10 17:00:24
【问题描述】：

function form_submit(){
  $('form[action="/specific"]').on("submit", function(e){
    e.preventDefault();
    var $this = $(this)
    var data = $this.serialize()
    return $.ajax({
      "method": "get",
      "url": "https://endpoint.com",
      "data": {
        "data": data
      }
    })
  })
}

我希望能够从函数外部捕获来自$.ajax 的承诺。像form_submit().then() 这样的东西不起作用，因为它都包含在.on 事件中。有人如何能够从事件中返回类似这样的特定内容？

是否以request为参数触发自定义事件？

function form_submit(){
  return $('form[action="/specific"]').on("submit", function(e){
    e.preventDefault();
    var $this = $(this)
    var data = $this.serialize()
    var request = $.ajax({
      "method": "get",
      "url": "https://endpoint.com",
      "data": {
        "data": data
      }
    })
    $this.trigger("submitted", [request]);
  })
}

form_submit().on("submitted", function(e, request){
  request.then(function(response){
    console.log("logging")
    console.log(response)
  });
});

【问题讨论】：

你为什么把submit事件处理器放在form_submit函数里面？
@Regent 作为一个经验法则，我不喜欢我的任何 jQuery 代码感染全局范围，也适合使用模块加载器（es6、commonjs、amd）导出变量，所以我的大部分 jquery选择器被包装在函数中。我的代码看起来更像这样gist.github.com/reggi/3898f13c4fb392c96132#file-klaviyo-js，使用 es6 模块导入和导出。
@Regent 我也可以像这样返回提交的事件回调，完全不使用选择器。用法在gist.github.com/reggi/3898f13c4fb392c96132#file-klaviyo-alt-js下方注释掉了
经典 DOM 事件是同步的，它们不支持这一点。但是新的 API 添加了event.waitUntil(promise) 方法。
只返回函数的函数...你不觉得你的代码过于复杂了吗？但是即使在你奇怪的代码中，你仍然可以使用$.Deferred()。

标签： jquery ajax events promise

【解决方案1】：

我希望能够从函数外部从 $.ajax 捕获承诺

然后你需要像响应式 Observable 而不是 Promise 之类的东西，因为 Promise 代表一次性事件并解决一次，而你需要多次发生这种情况。承诺对于一件事情来说是很棒的。我将在这里使用 RxJS，但这同样适用于像 Bacon 这样的库：

var el = $('form[action="/specific"]');
function form_submit(){
   return  Rx.Observable.fromEvent(el, 'submit').flatMap(function(ev){
       ev.preventDefault();
       var $this = e.target;
       return $.ajax(...); // flatMap on observable will wait for results like a `then`
   });
}

这会让你这样做

form_submit().subscribe(function(result){
    console.log(result); // log all results from submits
    // can also .flatMap or .map to chain like a promise `then`
});

请注意，如果表单提交仅在您可以从事件中做出承诺然后.then 时才会发生，但正如我一直喜欢说的那样 - 承诺很好地解决了一个非常具体的问题 - 没有灵丹妙药一般的并发性 - 每个问题都有可以很好地解决它的工具。

【讨论】：