JavaScript setTimeout() 函数不适用于 "onsubmit" 表单属性

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

你必须发送一个函数来执行一个函数。要么使用：

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

或者这样使用：

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

此外，如果不提交表单，您可以尝试执行 return false:

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

并且请使用不显眼的方法addEventListener。

Answer 2

使用现代 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 3

您正在赋值期间执行函数。删除括号 ()。您实际上需要将对函数的引用作为参数传递。添加括号时，您正在执行函数，然后将函数的 return 值作为参数传递。

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

此外，您也不应该同时使用 onsubmit 和内联赋值。有关详细信息，请参阅。

Answer 4

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

谢谢

JavaScript setTimeout() 函数不适用于 "onsubmit" 表单属性

JavaScript setTimeout() function not working on the "onsubmit" form attribute

javascript

html

settimeout

onsubmit