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

Queuing form submission requests until server has returned

本文关键字：服务器 返回 表单提交 请求 排队      更新时间：2023-09-26

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

当我在文本框中快速键入然后点击提交时，我遇到的问题就会发生。基本上，表单是在向服务器发送的所有可能性请求返回之前提交的。

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

Is there a way that I should be queuing submit events

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

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

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

我捕获了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事件......但也许它足以解决你的问题。

相关文章：