JavaScript setTimeout() 函数在 "onsubmit" form 属性上不起作用

我对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/code/tryit.asp?filename = g3y3e1yisnh1

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

使用现代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);
});

您必须发送函数才能执行功能。两者都使用：

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

或以这种方式使用：

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

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

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

，请使用addEventListener。

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

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

此外，您也不应完全使用onsubmit并完全使用内联作业。有关更多信息，请参见此答案。

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

谢谢

相关内容

最新更新

热门标签：