Question

我有一个网站，它使用提交按钮将命令发送到远程微处理器。如果用户在短时间内多次单击提交按钮，则远程微处理器和软件将崩溃。我想我可以在每个“提交”按钮按下之间添加一秒钟的延迟，这样它就不会崩溃。这是我提交按钮的内容。

<form name="test" action="http://mydomain.dyndns.org/?8" target="results" method="POST">
<input type="submit" value=" ← Move Left " />
</form>

我认为我可以在表单中使用类似onSubmit="setTimeout (1000)"的内容，但它似乎不起作用。我做错了什么？

示例：

<form name="test" action="http://mydomain.dyndns.org/?8" target="results" method="POST" onSubmit="setTimeout (1000)">
    <input type="submit" value=" ← Move Left " />
</form>

Answer 1

您必须实际编写代码来对请求进行排队，并以微处理器可以安全接受的任何速率将它们发送到微处理器。您需要在服务器端执行此操作，而不是在客户端执行此操作。

Answer 2

后端解决方案更可取，但是如果你想在客户端（或者代替）做它：

如果您的onsubmit返回false，则会停止提交。

我倾向于通过以下方式解决这个问题：

暂时禁用该按钮一秒钟，以便用户无法再次快速提交，和/或
忽略后续提交的尝试，除非至少已经过了一秒钟。

我不打算尝试排队所有提交内容并将其分开，因为用户可以点击按钮 lot 次。

因此，以下内容忽略了在第二个中提交的额外尝试，并且禁用了提交按钮。两个为什么两个？如果表单中包含字段，则用户可以通过按Enter键提交。

<form name="test" action="http://mydomain.dyndns.org/?8" target="results"
      method="POST" onSubmit="return testSubmit();">
   <input id="submitButton" type="submit" value=" ← Move Left " />
</form> 

<script>
   var allowSubmit = true;

   function testSubmit() {
      if (!allowSubmit)
         return false;

      allowSubmit = false;
      document.getElementById("submitButton").disabled = true;

      setTimeout(function() {
                    allowSubmit = true;
                    document.getElementById("submitButton").disabled = false;
                 }, 1000);

      return true;
   }
</script>

请注意以下代码：onSubmit="return testSubmit();" - 您需要“返回”，否则从testSubmit()返回的值将被丢弃，并且不会阻止提交。

我如何延迟提交表格？

2 个答案: