JQuery 函数延迟（按钮加载状态）

Question

我设置了表单验证，它将使用 Ajax 请求创建一些 Google 文档，然后在表单中的所有内容都经过验证后提交表单以在数据库中创建一个条目。

验证后要采取的操作由submitHandler 指定：

submitHandler: function(form) {
    $('#submitButton').button('loading');
    success1.show();
    error1.hide();
    var eName = $('#create_event').find('input[name="eventName"]').val();
    var eDate = $('#create_event').find('input[name="eventDate"]').val();
    var eType = $('#create_event').find('input[name="eventType"]').val();

    function getAgenda(eName, eDate, eType) {
        var result = null;
        var separator = "&";
        var scriptUrl = "http://example.net/libraries/upload.php?fType=agnd" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
        $.ajax({
            url: scriptUrl,
            type: 'get',
            dataType: 'html',
            async: false,
            success: function(data) {
                result = data;
            }
        });
        return result;
    }

    function getMin(eName, eDate, eType) {
        var result = null;
        var separator = "&";
        var scriptUrl = "http://example.net/libraries/upload.php?fType=min" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
        $.ajax({
            url: scriptUrl,
            type: 'get',
            dataType: 'html',
            async: false,
            success: function(data) {
                result = data;
            }
        });
        return result;
    }
    var agenda = $("<input>").attr("type", "hidden").attr("name", "agendaURL").val(getAgenda(eName, eDate, eType));
    $('#create_event').append($(agenda));
    var min = $("<input>").attr("type", "hidden").attr("name", "minURL").val(getMin(eName, eDate, eType));
    $('#create_event').append($(min));
    form[0].submit();
}

在表单提交之前，提交按钮不会进入“加载”状态。如果我删除了 Ajax 请求，那么加载状态会在单击时发生，而对于 Ajax 请求，它会非常延迟。

我在第二行将按钮设置为加载状态。

我的意思的一个例子可以在这里找到：http://getbootstrap.com/javascript/#buttons-stateful

任何帮助将不胜感激，提前感谢您的时间。

这是我的解决方法：

        submitHandler: function(form) {
          $('#submitButton').button('loading');
          console.log('Loading Button');
          $("#cancelButton").prop("disabled", true);
          console.log('Disable Button');
          success1.show();
          error1.hide();
          var eName = $('#create_event').find('input[name="eventName"]').val();
          var eDate = $('#create_event').find('input[name="eventDate"]').val();
          var eType = $('#create_event').find('select[name="eventType"]').val();
          var separator = "&";
          var agendaURL = "http://example.net/libraries/upload.php?fType=agnd" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
          var minURL = "http://example.net/libraries/upload.php?fType=min" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
          var agendaReturn = getAgenda(agendaURL);
          console.log('Called getAgenda');
          agendaReturn.success(function(data) {
            $('input[name="agendaURL"]').val(data);
            console.log('Assigned agendaURL hidden');
          });
          var minReturn = getMin(minURL);
          console.log('Called getMin');
          minReturn.success(function(data) {
            $('input[name="minURL"]').val(data);
            console.log('Assigned minURL hidden');
            submitForm();
            console.log('Form submit called');
          });

          function submitForm() {
            console.log('Form submitting');
            $('#create_event').unbind().submit();
          }

          function getAgenda(agendaURL) {
            return $.ajax({
              url: agendaURL,
              type: 'get',
              dataType: 'text',
              async: true,
            });
          }

          function getMin(minURL) {
            return $.ajax({
              url: minURL,
              type: 'get',
              dataType: 'text',
              async: true,
            });
          }
        }

Answer 1

你试过了吗

  async:true;

我认为应该可以。