Question

我对JavaScript非常陌生，因此如果我遗漏了一些明显的内容，我们深表歉意。

我试图在提交表单时显示一个隐藏的div，但与其立即显示，不如将其显示稍有延迟（例如3秒）。

我尝试在'onsubmit'属性上使用setTimeout（）函数，但是隐藏的div立即出现，并且没有延迟。

这是一个最小的示例：

<!DOCTYPE html>
<html>

<body>

  <p>When you submit the form, a function is triggered which alerts some text.</p>

  <form action="/action_page.php" onsubmit="setTimeout(myFunction(), 3000)">
    Enter name: <input type="text" name="fname">
    <input type="submit" value="Submit">
  </form>

  <div id="message" style="display: none">Loading...</div>

  <script>
    function myFunction() {
      document.getElementById("message").style.display = "block"
    }
  </script>

</body>

</html>

也可在此处获得： https://www.w3schools.com/code/tryit.asp?filename=G3Y3E1YISNH1

总而言之，setTimeout()正在运行myFunction，但没有预期的延迟。如果有人可以帮助我正确编写代码，我将非常感激！谢谢。

Answer 1

使用现代JS约定。在JS端而不是HTML端，找到您的表单并使用事件监听：

let form = ... // there are many easy ways to get this element

form.addEventListener("submit", evt => {
  // don't actually submit this form to its associated URL:
  evt.preventDefault();
  // and schedule the timeout
  setTimeout(myFunction, 3000);
});

Answer 2

您必须发送功能才能执行功能。可以使用：

onsubmit="setTimeout('myFunction()', 3000)"

或使用这种方式：

onsubmit="setTimeout(function () { myFunction(); }, 3000)"

此外，由于不提交表单，您可以尝试进行return false：

onsubmit="setTimeout(function () { myFunction(); }, 3000); return false;"

请通过使用addEventListener来使用不引人注目的方法。

Answer 3

您正在分配过程中执行该功能。卸下支架()。实际上，您实际上需要将引用作为参数传递给函数。添加括号时，您正在执行该函数，然后将该函数的返回值作为参数传递。

<form onsubmit="setTimeout(myFunction, 3000)">

此外，您也不应同时使用onsubmit和内联分配。有关更多信息，请参见this answer。

Answer 4

您正在调用myFunction，而不是将函数作为回调传递给setTimeout。更改它setTimeout(myFunction(), 3000) ---> setTimeout(myFunction, 3000)

谢谢

JavaScript setTimeout（）函数不适用于“ onsubmit”表单属性

4 个答案: