设置ajax表单提交延迟答案

【问题标题】：Setting delay on ajax form submisson设置ajax表单提交延迟
【发布时间】：2017-12-04 03:35:57
【问题描述】：

我想将表单提交延迟 2 秒。我看到了很多解决方案，但它们对我不起作用。我尝试使用 setTimeout 设置延迟但不能 100% 工作。下面是我的脚本和表单标签：我在哪里可以将逻辑添加到 setTimeout？

$("#leadForm${leadForm.index}").ajaxForm({
  beforeSubmit : function(arr) {
    $("#loadingSpan").show();
    $('#submitBtn').attr("disabled", "disabled");
  },
  success: function() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event' : 'formSubmissionSuccess',
      'formId' : 'leadForm${leadForm.productCode}'
    });
  },
  target : "#leadFormDiv${leadForm.index}"
});

<form action="/portal/individual/leads/form/product/${leadForm.productCode}/submit.do" id="leadForm${leadForm.index}" method="POST" commandName="leadForm" role="form" class="form-default form-dui" data-dui-form="">

【问题讨论】：

您可以检查 jQuery .delay() 选项。它可能会帮助你。 api.jquery.com/delay
“我在哪里可以将逻辑添加到 setTimeout？” – 你似乎在这里使用了某种插件 (ajaxForm)，它设置了所有必要的事件处理程序本身。因此，除非该插件明确提供了一种实现您想要的方法（不太可能），否则在它之上实现它可能会相当棘手。如果您编写自己的代码来设置自己的表单提交处理程序，这会容易得多。
当您使用ajaxForm() 时，您已经失去了对表单提交和正在发送的 AJAX 请求之间关系的控制。这意味着您不能使用当前逻辑延迟请求。您需要使用$.ajax 手动连接AJAX 请求。然后您可以将该调用包装在 setTimeout()

标签： jquery ajax

【解决方案1】：

来自source：

提交前：提交前在表单提交之前调用的回调函数。从回调中返回 false 将阻止表单提交。

我相信如果您可以在这里设置 2 秒超时，它将等待 2 秒然后调用提交函数。

你可以试试这个并检查它是否有效：

beforeSubmit : function(arr) {
           setTimeout(function(){ $("#loadingSpan").show();
           $('#submitBtn').attr("disabled", "disabled"); return true;}, 2000);
           }

【讨论】：

这行不通。仅仅因为 beforeSubmit 和 submit 是按顺序调用的。即使您在 beforeSubmit 中设置了超时，该函数也将被视为在设置超时后结束。同样通过这种方式，您会在操作后 2 秒显示微调器并禁用按钮，这不是合适的行为。

【解决方案2】：

通过网站上的 API，您可以这样做：

$("#leadForm${leadForm.index}").submit(function() { 
    $("#loadingSpan").show();
    $('#submitBtn').attr("disabled", "disabled");
    setTimeout(function(){
        $("#leadForm${leadForm.index}").ajaxSubmit({
            success: function() {
                window.dataLayer = window.dataLayer || [];
                window.dataLayer.push({
                   'event' : 'formSubmissionSuccess',
                   'formId' : 'leadForm${leadForm.productCode}'
                });
            },
            target : "#leadFormDiv${leadForm.index}"
        });
    }, 2000);
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

【讨论】：

感谢您的回复，但是这显示了我所期望的行为，并且超时也起作用了。
在这种情况下，您应该更改提交按钮的类型。如果您使用 type="button" 而不是 type="submit" 您可以使用 $("form").submit( ); 要获得更准确的答案，我需要查看表单内容

【解决方案3】：

感谢大家的回复。将尝试此处建议的其他解决方案，但现在我在下面尝试并且正在工作。

我只是在点击按钮时调用了下面的函数。

  function sendFormWithDelay() {

    $('.spinner-action').show();
    $('#submitBtn').attr("disabled", "disabled");
    $('#submitBtn1').attr("disabled", "disabled");
    $('#backbutton').attr("disabled", "disabled");
    var id = setTimeout(function() {
        $("#leadForm${leadForm.index}").submit();

    },2000);//delaying the submit for 2 seconds so that ninja lead response is returned.

    return false;
}

【讨论】：

如果您在问题中指定不需要使用 ajaxForm 插件，那么您会从任何人那里得到这个答案..
$("#leadForm${leadForm.index}").submit();在上面的函数中实际上调用了ajaxForm插件，上面最初发布的代码。
不，它没有。 .submit() 是简单的 jQuery...必须有一个使用 ajaxForm 设置的事件侦听器来捕获 submit()。无论如何很高兴你解决了。干杯。