javascript - 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;

我认为它应该有效。