2

我有一个基于主干的视图，用户可以在其中在文本字段中输入一个单词并提交表单。有两个与视图相关的事件 -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)

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

有没有办法让我排队提交事件，以便在所有可能性请求都返回之前它们不会发生？

4

2 回答 2

0 
Is there a way that I should be queuing submit events

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

  1. 初始化视图时，设置 this.outstanding_callbacks = 0;
  2. 就在您进行 $.getJSON 调用之前，增加该 var (this.outstanding_callbacks++)
  3. 在@buildConceptAttrs 中减少 var (this.outstanding_callbacks--)
  4. 当你去提交的时候，检查outstanding_callbacks；如果 > 0，则不提交。相反，请执行 window.setTimeout(5000, retryFunction)，其中 5000 是您想要等待的毫秒数，而 retryFunction 基本上是相同的函数（它可能实际上是相同的函数）

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

于 2012-04-18T19:16:38.380 回答
0

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

我显示一条加载消息：

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

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

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

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

于 2012-04-18T20:43:59.930 回答