Question

我有一个基于骨干的视图，用户可以在文本字段中键入单词并提交表单。与视图相关联的事件有两个 - submit和keyup。

class NewConceptView extends Backbone.View
  el: '#new-concept-cont'
  template: JST['concepts/new']

  events:
    'submit form': 'handleSubmit'
    'keyup #concept_title' : 'getPossibilities'

当用户输入时，我需要点击我的服务器并请求一些关于用户输入内容的数据（称为possibilities）（就像自动完成插件一样）。

getPossibilities: (e) ->
  currentText = @titleInput.val() 
  if currentText.length > 0
    params = { text: currentText }
    $.getJSON(url, params, @buildConceptAttrs)

然后当用户提交表单时，我需要从服务器中获取最后的可能性并将它们添加到集合中。

handleSubmit: (e) ->
  e.preventDefault()
  @titleInput.val('')
  @collection.create(@conceptAttrs)

当我快速输入文本框然后点击提交时，我遇到了问题。基本上，在向服务器返回所有可能性请求之前，表单都会被提交。

是否有一种方法可以排队提交事件，以便在所有可能性请求都返回之前它们不会发生？

Answer 1

Is there a way that I should be queuing submit events

好吧，我不知道应该，但我使用的基本方法是：

初始化视图时，请设置this.outstanding_callbacks = 0;
在你进行$ .getJSON调用之前，增加那个var（this.outstanding_callbacks ++）
在@buildConceptAttrs中减去var（this.outstanding_callbacks - ）
当你去提交时，检查outstanding_callbacks;如果它是＆gt; 0，不要提交。相反，做一个window.setTimeout（5000，retryFunction），其中5000是你要等待多少毫秒，retryFunction基本上是相同的函数（它可能是相同的函数）

现在，您可能需要进行一些绑定或某些操作，以便您可以在步骤＃3和＃4中访问该视图，但希望这会给您一个粗略的想法。

Answer 2

我捕获了jQuery.ajaxStart和jQuery.ajaxStop个事件。

我显示 loading 消息：

$(function(){
  $('#loading').ajaxStart( function() {
    $(this).animate({ top: "0" }, 200);
  });

  $('#loading').ajaxStop( function() {
    $(this).animate({ top: "-70" }, 100);
  });
});

但是考虑到这个想法，您可以使用相同的技术来禁用form.submit()，或者至少等待.ajasStop()执行提交。

它并没有真正等待所有正在进行的事件......只是为了 AJAX ......但也许它可以解决你的问题。

将表单提交请求排队，直到服务器返回

2 个答案: